为什么Facebook要将视频从Flash全面迁移到HTML5?

英文原文:Why we chose to move to HTML5 video

编者按:Facebook 前端高级工程师 Daniel Baulig 解释了 Facebook 为什么要将视频全面迁移到 HTML5,包括这样做的好处,带来的挑战和解决办法。

最近,我们将 Facebook 网络中的所有视频全部从 Adobe Flash 迁移到了 HTML5。我们将继续与 Adobe 合作,为我们平台上的游戏提供一个可靠、安全的 Flash 体验,但我们会在所有的浏览器中默认使用 HTML5 技术播放视频。

从开发速度到易访问性,HTML5 提供了很众多好处。Facebook 体系庞大,需求复杂,迁移到 HTML5 能让我们更好地去提升创新的速度和规模。

  HTML5 的优点

  开发速度

使用 Web 技术使我们能够利用开源社区和 Facebook 中已有的优秀浏览器工具,不必重新编译代码,并能够在浏览器直接应用变化,从而让我们得以快速行动。

  可测性

我们在 Facebook 有一个优秀的测试基础设施。迁移到 HTML5 视频后,我们可以自由地使用自己基础设施里所有的 web 工具,比如 Jest 和 Webdriver。

  易访问性

HTML5 使我们能够建立一个完全支持屏幕阅读器和键盘输入访问的播放器。我们可以利用 HTML5 提供的辅助工具让视力障碍人士更容易地使用我们的产品。让所有人都能用上 Facebook 是我们使命(让世界更加开放和互联)中的一个重要组成部分。

 我们必须应对的挑战

  获得正确的日志

视频日志有助于我们了解人们如何使用视频播放器以及播放器的工作情况。我们会向公众分享一些数据,例如视频观看次数和视频发布者,而我们会使用其他的一些数据来确定应该将多少以及哪些视频展现给人们。我们必须确保在同一场景中,新的视频播放器记录的数据和老的播放器记录的数据一致。由于配置差异和其他的一些细节,要做到这一点异常的困难。为确保日志数据的正确性,我们创建了一个测试套件,在相同的用户交互场景下,同时运行两个视频播放器,然后验证日志记录是否一致。这样,我们才能确保新的 HTML5 视频播放器的报告数据会有一个很高的可信度。

  浏览器 bug

在将视频转移到 HTML5 技术之前,我们要解决的一个主要问题是各种浏览器中存在的各种关于 HTML5 视频的 bug。在 Chrome 中使用 SPDY 协议的一个具体 bug 会导致浏览器在 News Feed 上停止加载和播放视频。我们最终确定了这个问题是由于同时加载了太多的视频触发的,所以我们减少了视频同时加载的数量,并确保如果加载的视频不再需要时我们会尽快将它们删除。

    在旧浏览器上的糟糕表现

从理论上讲,现在使用的大多数浏览器都支持 HTML5 视频。然而,在实践中我们发现了很多老版本浏览器上使用 HTML5 播放器时会比使用 Flash 播放器表现更差。此外,我们还看到其他的一些错误,比如更长的加载时间和整体上更糟的体验。因此我们决定首先只在一小部分浏览器上推出 HTML5 播放器,然后一旦我们提升了性能并修复了小 bug,我们会逐渐推向更多的浏览器版本和操作系统。这就是为什么我们一直等到最近才在所有的浏览器中(除了很小的一部分)将视频播放技术默认切换到 HTML5。

  页面加载时间变长

我们在推出 HTML5 播放器时面临的最后一个主要问题是,加载 Facebook 的时间变长了。在 Facebook,我们十分关心我们提供给人们的体验。用户需要多久加载 Facebook 是我们衡量用户体验的一个重要因素。当我们发布了 HTML5 播放器后,我们注意到,用户平均加载 Facebook 所花费的时间有所增加。通过修复几个小的性能问题,并进行了多项细微的优化,我们终于看到了一个让我们感到高兴的水平。

  对指标和用户体验的影响

使用 HTML5 视频技术不仅简化了我们开发过程,同时也提高了人们在 Facebook 上的视频体验。切换到 HTML5 后,视频的播放速度更快了,人们点赞、评论和分享视频的数量更多了,并且用户报告的错误更少了。我们做出这项调整后,人们似乎开始在视频上花费更多的时间。

视频是你与周围的世界进行互联的一个精彩渠道,而我们很高兴地看到我们在使用 HTML5 技术后,能使 Facebook 的视频体验变得更好。

本文由WeX5君整理,WeX5一款开源免费的html5开发工具H5 App开发就用WeX5!

阅读其他app 开发相关文章:http://wex5.com/cn/?p=3443

时间: 2024-11-15 20:47:29

为什么Facebook要将视频从Flash全面迁移到HTML5?的相关文章

Facebook 将所有视频从 Flash 切换成 HTML5

许多科技巨头都希望最终杀死漏洞不断的Adobe Flash,但是想要放弃却并不是那么地容易.不过知名社交网络Facebook的首席安全官却言出必行,并且在6个月后正式将全站视频默认切换到了HTML5.在今日撰写的一篇博客文章中,Facebook前端工程师Daniel Baulig写到:"我们仍将继续与Adobe合作带来更加安全可靠的Flash平台游戏体验,但会在所有浏览器上默认改变视频内容". 此前,HTML5主要用来处理页面上繁重的web视频任务(包括Newsfeed等页面),但在旧

各大视频网站 flash 地址 用 html5 video 或者 iframe 标签播放。

问题描述 各大视频网站 flash 地址 用 html5 video 或者 iframe 标签播放. 如题 各大视频网站 flash 地址 用 html5 video 或者 iframe 标签播放. 解决方案 android中HTML5的Video标签的播放[HTML5] Video 标签播放及控制视频 解决方案二: 视频播放页面不是有分享,分享中列出了flash地址,或者iframe嵌套什么的,拷贝html放入你网站

Facebook将对视频进行人物识别及身份标注

如今人工智能和图像识别技术快速发展,Facebook等一些科技巨头,已经能够对人们拍摄的照片进行人脸识别,并且标注出身份,这样,网民可以根据好友的名字,对海量的照片进行搜索和归类.不过据外媒最新消息,Facebook还将更进一步,将会对海量视频中出现的人物进行识别和标注,这样更加方便网民根据人物搜索视频. 据美国科技媒体报道,在人脸识别方面,Facebook早已经推出了大量的产品.比如2015年年中,Facebook推出了移动私密分享工具Moments,该工具能够自动扫描用户的照片,识别出都有什

Facebook Messager添视频即时共享功能

Facebook Messager添 视频即时共享功能6月13日消息,据科技博客Techcrunch报道,Facebook Messenger 进一步加大了可视通讯特性,添加了类似Snapchat的即时录制视频并发送选项.这项功能已经登陆Facebook Messenger的iOS版本,并很快会添加至Android版.今年4月,Messenger就获得了预录制视频并分享以及多画面自拍摄像机的功能,但现在用户只要点击并按住摄像按钮,就能拍摄和发送视频.就在Messenger增加这项功能的前一天,F

Facebook计划将视频广告扩展至海外7国

据路透社报道,http://www.aliyun.com/zixun/aggregation/1560.html">Facebook准备在英国.巴西和另外5个国家推出视频广告服务,允许营销者在类似电视广告的时间段向用户发布广告.此举标志着Facebook最受关注的广告产品之一将大幅扩张,分析师认为这有助于该公司在广告市场占据更大份额. 这种时长15秒的广告是通过用户的新闻推送发布并自动播放,但用户不点击是没有声音的.今年3月Facebook开始在美国销售这种广告,客户包括保险公司Progr

不仅要“打假”,Facebook 还要治理视频直播中的裸露、暴力内容

据 VentureBeat 报道,12 月 1 日,Facebook 应用机器学习部门主管 Joaquin Candela 表示,Facebook 正在开发一项新的系统工具,可以在直播视频中对令人反感的违规内容进行自动标记,同时会继续利用人工智能技术来加强对视频直播内容的监控.目前,这一自动标记系统工具已经开始在 Facebook 视频直播产品 Facebook Live 上进行测试. 9 月初,Facebook 曾以不能显示裸体为由"封杀"了一张著名越南战争照片"战火中的女

Facebook将推视频广告

北京时间3月14日早间消息,Facebook将允许广告主在其网站上投放视频广告,而Facebook也将确保这些视频广告有足够高的质量. Facebook和Twitter等社交媒体公司正在与电视频道竞争广告预算,以实现持续的快速增长.这一市场对推动Facebook的市值上涨至关重要,同时也给传统电视网带来了长期威胁. Facebook在广告方面一直保持谨慎,从而避免令用户感到厌烦.类似Twitter的社交媒体公司通常会极力避免用户页面上充斥着大量用户不需要的内容. Facebook周四在官方博客中

如何下载网上的视频和flash到电脑

1.打开你电脑中的IE浏览器,然后在菜单栏点击[工具]-[IE选项(Intenet Express选项)]在弹出对话框中我们点击[常规]中找到,Internet临时文件下的[删除文件]-[删除所有脱机内容],确定即可了. 2.我们现在把cookie记录也进行删除了.     3.现在我们正式开始了,我们打开要下载的flash文件了,然后点击[设置]-[查看文件] 如下图所示   4.这样我们就打开了刚才查看网页的图片,flash,视频文件缓存地址了,也是临时文件了,如果有swf,flv等等之类的

图文实录:Facebook发布Instagram视频功能

中介交易 SEO诊断 淘宝客 云主机 技术大厅 1:06 PM 发布会现在开始. 1:07 PM 马克·扎克伯格(Mark Zuckerberg)登台. 1:07 PM 马克表示,人们希望共享很多不同类型的文件. 1:07 PM "我们曾尝试过其他东西." 1:08 PM 马克开始逐一介绍Facebook的移动生态应用程序:Instagram.Messenger等等等等. 1:08 PM "今天,我们将注意力放在Instagram上." 1:09 PM 1:09 P