AdobeFlash播放器的安全漏洞长久以来都是大麻烦。今夏早些时候,Flash播放器甚至被迫在一周内更新36个安全补丁。
史蒂夫.乔布斯素以反对Flash著称,他在2010年时发表过一份措辞严厉的声明,并拒绝在iPhone上兼容Flash。到2011年,Adobe宣布停止在移动设备上支持Flash播放器。
谷歌最新关于Flash的声明则可能敲响了Flash的丧钟。谷歌Chrome团队宣布将在Chrome浏览器中禁止加载Flash应用,包括Flash播放器。
Chrome承诺这些变化将带来更轻量级的网站:资源加载更快,电池续航更长。Chrome的决定整体上来说对网站是好事,对视频流则会引起担忧。
尽管过去几年很多用户已经抛弃Flash播放器,但它仍然被广泛使用。一些平台包括Chrome已经默认使用HTML5播放器,但是目前它们仍然能够加载Flash并且回退到Flash播放器。那么,Flash播放器之死对视频流意味着什么?
首先,不要担心。尽管许多用户使用Flash插件在浏览器中播放HLS流,但其实他们不必如此。
所有主流移动浏览器都能够原生支持HLS协议。不幸的是,所有桌面浏览器都缺少对HLS协议的原生支持。
曾经这是一个问题,但是现在这个问题可以轻易绕过去。两个开源库hls.js和video.js可以高效地把HLS视频流无缝转换成字节流,称作Fragmented MP4。得益于MSEAPI,这些Fragmented MP4能够在浏览器中播放。现在用户可以在任何地方播放HLS视频流,而不必安装Flash播放器插件。
专业播放HLS流
使用MSE播放HLS流看起来非常有前途,但是实施起来却不那么直接。要想如愿以偿,你需要从以下步骤开始:
1.集成支持MSE的库(比如hls.js或video.js)到播放器。如果你已经构建定制版Flash播放器,这一步会有点棘手。不过这正是转向新播放器的好理由。如今有很多性能良好的现代播放器,使用它们你不需要从头编译。想想维护播放器所花费的时间吧。
2.确保集成的库能够播放HLS视频流。许多原生HLS流实际上不是有效视频流。我们发现各种各样的问题,包括:视频采样重叠,元数据丢失,非对齐帧,帧尺寸变化却没有EXT-X-DISCONTINUITY标志,EXTINF和片段URL之间有注释,解码问题,等等。
尽管Flash播放器能够自动处理其中的一些问题,但是hls.js却不能。因此确保视频流正确配置非常重要。
你可以在这里检查HLS视频流的有效性,并在公共测试机上进行测试:hls.js,video.js,JW7.4。
3.注意回退兼容Flash。在MSE不可用的情况下你可能需要回退到Flash播放器。MSE在以下浏览器上可用:
使用hls.js和video.js实现高质量播放
video.js有自己基于JavaScript的库,但是我们更看中它可靠的性能,对问题视频流的支持,以及所实现的ABR算法。
最重要的是,它的社区非常活跃。关于hls.js最大的问题在于它不能在老旧浏览器上回退到Flash播放器。
在Peer5,我们为video.js开发了一款包含hls.js的开源插件,你可以在这里查看它。
示例代码:
奇迹发生在videojs-contrib-hls.js脚本,它支持hls.js和video.js事件,并能够处理基本video标签以检测是否本地支持hls。你可以在这里获得最新的捆绑插件。
回退到Flash播放器
那么,如果你的平台不能本地播放HLS并且不支持MSE该怎么办?如果用户使用老旧浏览器,或者视频流是不支持的格式,有如下两种替代办法:
1.向用户发送错误信息,解释当前情况。这是hls.js的默认做法。对于内容提供商来说,他们的观众都使用现代浏览器,这才是最有价值最需要关注的部分。在解决方案中包含Flash回退很麻烦,也不值得这么做。
2.加载Flash播放器,播放视频流。像IE 8-10这样的老旧浏览器,占据大约20%的互联网流量。因此很多广播提供商希望能够回退到Flash播放器。
结论
Flash播放器即将寿终正寝,但是不用担心HLS视频流播放问题。如果在播放器中集成Peer5的开源代码,不管是原生支持还是通过MSE,所有现代浏览器都能够播放HLS视频流。
作为额外福利,视频流在老旧浏览器播放时还能够回退到Flash播放器。现在,所有HLS流都能够在没有Flash的情况下无缝播放。
长话短说
1.Flash播放器将很快在现代浏览器中禁用;
2.从Flash播放器迁移到MSE将会极大提升对HLS流的支持;
3.有很多基于MSE的库能够很容易集成到播放器中;
4.你很有可能为了兼容老旧浏览器而回退到Flash播放器;
5.所有你要做的就是集成Peer5的开源代码到你的播放器中。
原文地址:https://blog.peer5.com/flash-is-dying-in-december-long-live-html5-video-player/
更多资料可关注官方公众号:编风网(微信ID:befoio)或 WebRTC编风网(微信ID:webrtcorgcn)