Web网页播放器

0 引言

本博客是关于网页播放器简述，是后续网页播放器制作详解的开端，以下都是本人亲身经历和切身感受。此博客秉承以下原则：

• 没有原理性介绍，我不是这个工具的作者，写了也是抄的。
• 没有太详细的操作步骤，操作步骤尽量指向官方文档。
• 没有遇到的或者不值一提的，我都不会写上去。

作者	Daniel.Leung
组织	池鱼 - YiiGaa
邮箱	YiiGaa@126.com
日期	2019-01-03

1 介绍

1.1 背景

随着互联网发展，网页已不仅仅承载着图文信息，更多的是音视频信息，而播放器，也逐渐成为一个web系统前端独立的模块。简单的一句，网站都想用简单的一个<iframe src="//path/to/player.html?param=xxx"></iframe>就可以嵌入播放器。但同时，这也会成为成为千万软件工程师的痛，蛋碎成粉末一般的痛。

1.2 前提知识

• 浏览器不会支持所有视频文件，目前支持的有mp4、flv、rtmp、hls等（目前主流的格式也就这些了，当然flv、rtmp、hls原生的html5标签是不支持的）。而一般支持上传各种视频的web系统，都需要一个VMS（媒资管理系统），把各种不同格式的视频转码成浏览器可播放的格式（类似于格式工厂的作用）。这个以后有机会我也会写相关的博客。
• 浏览器不会支持所有的mp4，视频有封装格式和编码格式，封装格式指的是mp4、flv这种，对于浏览器，会有是否是流媒体的区别，而流媒体的具体概念在这不详述，更多可点击 。而不同的封装格式会支持不同的编码格式，虽然同是mp4，但是帧的封装格式会有H264，H265，MPEG-4 part 2。但是浏览器（Chrome）不支持H265，MPEG-4 part 2的解码，就是不支持图形音频的显示解析，更多可点击 。所以，一般认为，浏览器一般只支持H264（视频），ACC/MP3（音频）编码格式的MP4等其他视频文件。

2 播放器

这里只做简单的描述，毕竟我只用过videojs，如果做播放器对比的话也不会有真实的评价，更何况，目前流行的播放器对于浏览器适应度或者视频播放都不会有太大偏差，苦于选择，还不如立马开始。

2.1 Flash

费电，不安全，性能差等一大堆问题的Flash播放器已经被广大商家弃用了，Adobe也宣布2020年后不再更新。不过在HTML5正式流行起来之前，Flash应该是最流行的视频播放方式，几乎也是唯一的播放方式。

• 官网：https://www.adobe.com/products/flashplayer.html
• 虽然Flash对于“现代”浏览器已经几乎无用武之地了（甚至连flv也可以用bilibili开源的flv.js播放），但是要想支持完美支持IE11以下浏览器，却只能用flash作为播放器（虽然videojs也可以内嵌flash支持，但是IE11以下没有开放全屏的API，所以其他播放器是不可能全屏播放的，但是Flash却可以）。

2.2 Videojs

Videojs是一个基于JavaScript的HTML5视频播放器，当浏览器不支持时自动切换成Flowplayer播放器。支持H.264、Theora OGG和Google WebM格式。它没有依赖任何JavaScript框架，支持全屏播放和音量控制。支持HTML5和Flash的播放技术切换。
以上都是优点，但是实际使用过程中，会有各种各样的问题。

• 官网：https://videojs.com/
• 这应该是目前比较值得使用的开源播放器了，也是我使用深度最高的一个。

2.3 JW Player

JW Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器，支持 Sliverlight 播放，可以通过一个XML文件使播放器自动切换显示一组图片，并播放背景音乐。它支持播放的Adobe Flash Player和HTML5浏览器可以处理任何格式（FLV文件，H.264标准，MP4功能，VP8的，WEBM，支持MP3，AAC，JPG，PNG和GIF）。

• 官网：https://www.jwplayer.com/jw8/
• 这个播放器我没使用过，但是看上去很高端，但是它是收费的，不同的版本有不同的功能。

2.4 Clappr

巴西著名的门户网站 Globo.com(视频播放器),使用的是基于OSMF的Flash组件。在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等。

• 官网：http://clappr.io（我没上去过，你可以试试 https://www.bootcdn.cn/clappr/）
• 这个播放器我没正式使用过，可我在一个破碎的项目里也调试过问题，发现这个播放器还是可以的。

2.5 MediaElement.js

MediaElement.js不仅能够添加我们常用的html5视频格式（mp4,m4v,mov）， 而且还支持回退方式，即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器。

• 官网：http://www.mediaelementjs.com/
• 这个播放器我也没使用过，也是一个开源的播放器。

2.6 Flv.js

Flv.js 是由 bilibili 网站开源的 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发（ECMAScript 6 编写） ，没有用到 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器，实现了 FLV 格式视频的播放。

• Git：https://github.com/Bilibili/flv.js
• 这个轻量级的播放器我也没用过。
  简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

3 播放器选择

• 如果是轻度使用的话，鉴于目前流行的播放器对于浏览器适应度或者视频播放都不会有太大偏差，选一个UI符合网站风格的就好。
• 而如果是要适配视频协议比较多、或者要完全定制播放器UI的，也无需太执着于哪一个播放器，最好是自己描画控制栏和其他，通过API和Event操作控制播放器。虽然投入较大，但是这样做下来的话是可以稍作修改就可以用作其他项目，而且也不制限于哪一个播放器（通过修改API即可替换开源播放器，毕竟软件总会有制限和BUG）。

4 后记

开源的世界，终将会越来越庞大和完备，但同时也会越来越臃肿和混乱。看起来，我们只要选择好零部件和写好胶水代码即可完成项目。但实际上，谁能保证这些零部件不会出错和适应以后的需求变更。所以，太过依赖某一零部件或者以该零部件为核心，终将不会是一个能持续提升的产品，而是一个持续打补丁的垃圾。
更上一层楼，以更高的视角去选用工具，而不拘泥于任一工具。才不会在一个个持续打补丁的垃圾中掉落着我们所剩无几的秀发。