wap html5播放器和直播开发小结

摘要：此文已由作者吴家联授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。播放器的设计思路重构后应该包含这些功能支持点播非加密的和直播播放兼容适配移动端根据平台自动选择使用还是。直播的一些特点直播状态的判断。

此文已由作者吴家联授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

去年年中的时候，借着产品改版的机会，将之前的h5播放器好好整理重构了一番。之前的h5播放器较为简陋，有几个大问题：没有适配移动端（最大的不足）、没有提供直播模式、有一些历史遗留的bug没有修复。重构版除了解决了这几个大问题外，还做了很多的优化。加上与flash播放器的结合和近期飞哥主导的教育产品组件标准化，播放器适用性变得更强更通用了。

h5播放器的设计思路


重构后应该包含这些功能：支持点播（非加密的MP4）和直播播放（m3u8）、兼容（适配）移动端、根据平台自动选择（使用flash还是h5）。

框架和库上，还是选择主要使用nej框架，nej提供了很丰富的方法。对外暴露的类使用regular实现，因为教育产品前端组件和业务工程大部分是使用regular的，在使用上会很方便。另外在移动端上选用了flexible方案，因为教育产品的web页适配已经统一使用flexible了，手势事件的处理选用了

为了方便扩展和添加组件，使用了观察者模式。观察者模式在视频播放器这样规模的工程中使用非常合适，也是屡试不爽的一种设计模式。我直接参考了flex中类似的实现，使用js写了一遍（当然自己写也很快）。

   ![][1]

图如上所示，component基类和componentContainer单例类实现了观察者模式，所有组件都继承自component类，component实例中可以调用方法发送notification对象进行组件之间的通信，notification的调度则在componentContainer中实现了。这些组件分为必须组件和可选组件，必须组件包括：视频对象组件（movieData）、视频播放组件（mainVideo）、api组件等，可选组件则是根据不同产品的业务需求来开发的，可以通过不同组件列表的配置来自定义播放器的具体功能，这个也是在componentContainer实现。Html5VideoMedia则是对HTMLVideoElement的封装，它不作为一个组件，只是提供视频播放的功能，以及定义了相关的事件，使用Html5VideoMedia的除了视频播放组件，还可以是片头广告组件。

适配方面，样式上的适配使用了flexible的方案。有的组件比较复杂，比如控制条，在web端和移动端功能差别很大，样式差别也很大，可以考虑不同平台使用不同组件（图中可以看到control和controlMobile），逻辑上会很清晰，不用写很多的if和else，不过因为这样要依赖更多的组件，js和css文件会更大一些。个人觉得为了提高代码的可维护性，牺牲部分的文件大小也是可取的。

hls直播的一些特点

直播状态的判断。其实直播功能跟业务的关联是很大的，这里的直播状态也是只业务中的状态，比如：未开始、即将开始、直播中、直播结束等等。我们产品中目前还是使用前端轮询的方式更新直播的状态，有一点要提的是hls流是不会触发end事件的，所以h5直播的状态其实是完全靠轮询来控制的。

如何判断流异常。一般网络问题或者是源问题的处理可以监听video标签和source标签的error事件，两种标签都需要监听。但是error触发时的错误信息有时候并不信息，或者说不同浏览器实现上不一样，之前有碰到过改变currentTime属性来seek，偶尔会触发error事件，但是error中只说了是网络错误，没有任何其他信息，在对比了其他视频后才确定是某个视频转码的问题，确实十分的蛋疼。在直播流播放过程中，偶尔会出现流异常的情况，流异常一般会表现为画面卡死，不一定触发error事件。我参考了之前青果同事的方案：每隔一段时间检查currentTime，如果在播放状态下currentTime在这段时间内未改变，很可能就是流异常了，则主动重新加载。

3.一些目前无法解决的问题

ios上视频相关的问题很多，因为系统的限制太多了。稍微列一下：

同时只能播放一个视频或者音频，只允许一个video或者audio标签。做片头广告功能会麻烦一点。

ios版本较低的Safari中播放视频会强制全屏，ios 10中可以使用playsinline。在微信和一些定制的webkit中可以添加webkit-playsinline解决。

在没有人为操作的情况下，无法实现进入页面自动开始播放视频

ios中无法使用js控制video音量，只能由物理按键控制。在ios中你可以直接隐藏音量控制功能了。。。

还有截屏的问题，不过产品中没有使用到就暂时没有调研。

android上的问题也很多，主要是因为android版本太多、机型太多，各方面参差不齐。稍微列一下：

部分android系统会直接替换video标签，使用系统播放器播放，常见于国产手机

canPlayType方法检测结果与实际不符，这个问题在开发过程中遇到过，例如在一部华硕手机上检测到不支持m3u8播放，但是实际却可以播放，原本想放开这个限制的，后来发现在云课堂app的webview中强制播放可能会导致app崩溃，所以最后还是加上了检测。。

不支持m3u8播放的android一般是android4.0左右及以下的

网易云免费体验馆，0成本体验20+款云产品！

更多网易技术、产品、运营经验分享请点击。

文章来源： 网易云社区