wap html5播放器和直播开发小结
此文已由做者吴家联受权网易云社区发布。
css
欢迎访问网易云社区，了解更多网易技术产品运营经验。html
去年年中的时候，借着产品改版的机会，将以前的h5播放器好好整理重构了一番。以前的h5播放器较为简陋，有几个大问题：没有适配移动端（最大的不足）、没有提供直播模式、有一些历史遗留的bug没有修复。重构版除了解决了这几个大问题外，还作了不少的优化。加上与flash播放器的结合和近期飞哥主导的教育产品组件标准化，播放器适用性变得更强更通用了。前端
1. h5播放器的设计思路 android
重构后应该包含这些功能：支持点播（非加密的MP4）和直播播放（m3u8）、兼容（适配）移动端、根据平台自动选择（使用flash仍是h5）。ios
框架和库上，仍是选择主要使用nej框架，nej提供了很丰富的方法。对外暴露的类使用regular实现，由于教育产品前端组件和业务工程大部分是使用regular的，在使用上会很方便。另外在移动端上选用了flexible方案，由于教育产品的web页适配已经统一使用flexible了，手势事件的处理选用了web
为了方便扩展和添加组件，使用了观察者模式。观察者模式在视频播放器这样规模的工程中使用很是合适，也是屡试不爽的一种设计模式。我直接参考了flex中相似的实现，使用js写了一遍（固然本身写也很快）。设计模式
图如上所示，component基类和componentContainer单例类实现了观察者模式，全部组件都继承自component类，component实例中能够调用方法发送notification对象进行组件之间的通讯，notification的调度则在componentContainer中实现了。这些组件分为必须组件和可选组件，必须组件包括：视频对象组件（movieData）、视频播放组件（mainVideo）、api组件等，可选组件则是根据不一样产品的业务需求来开发的，能够经过不一样组件列表的配置来自定义播放器的具体功能，这个也是在componentContainer实现。Html5VideoMedia则是对HTMLVideoElement的封装，它不做为一个组件，只是提供视频播放的功能，以及定义了相关的事件，使用Html5VideoMedia的除了视频播放组件，还能够是片头广告组件。api
适配方面，样式上的适配使用了flexible的方案。有的组件比较复杂，好比控制条，在web端和移动端功能差异很大，样式差异也很大，能够考虑不一样平台使用不一样组件（图中能够看到control和controlMobile），逻辑上会很清晰，不用写不少的if和else，不过由于这样要依赖更多的组件，js和css文件会更大一些。我的以为为了提升代码的可维护性，牺牲部分的文件大小也是可取的。浏览器
2. hls直播的一些特色微信
直播状态的判断。其实直播功能跟业务的关联是很大的，这里的直播状态也是只业务中的状态，好比：未开始、即将开始、直播中、直播结束等等。咱们产品中目前仍是使用前端轮询的方式更新直播的状态，有一点要提的是hls流是不会触发end事件的，因此h5直播的状态实际上是彻底靠轮询来控制的。
如何判断流异常。通常网络问题或者是源问题的处理能够监听video标签和source标签的error事件，两种标签都须要监听。可是error触发时的错误信息有时候并不信息，或者说不一样浏览器实现上不同，以前有碰到过改变currentTime属性来seek，偶尔会触发error事件，可是error中只说了是网络错误，没有任何其余信息，在对比了其余视频后才肯定是某个视频转码的问题，确实十分的蛋疼。在直播流播放过程当中，偶尔会出现流异常的状况，流异常通常会表现为画面卡死，不必定触发error事件。我参考了以前青果同事的方案：每隔一段时间检查currentTime，若是在播放状态下currentTime在这段时间内未改变，极可能就是流异常了，则主动从新加载。
3.一些目前没法解决的问题
ios上视频相关的问题不少，由于系统的限制太多了。稍微列一下：
1. 同时只能播放一个视频或者音频，只容许一个video或者audio标签。作片头广告功能会麻烦一点。
2. ios版本较低的Safari中播放视频会强制全屏，ios 10中可使用playsinline。在微信和一些定制的webkit中能够添加webkit-playsinline解决。
3. 在没有人为操做的状况下，没法实现进入页面自动开始播放视频
4. ios中没法使用js控制video音量，只能由物理按键控制。在ios中你能够直接隐藏音量控制功能了。。。
5. 还有截屏的问题，不过产品中没有使用到就暂时没有调研。
android上的问题也不少，主要是由于android版本太多、机型太多，各方面良莠不齐。稍微列一下：
1. 部分android系统会直接替换video标签，使用系统播放器播放，常见于国产手机
2. canPlayType方法检测结果与实际不符，这个问题在开发过程当中遇到过，例如在一部华硕手机上检测到不支持m3u8播放，可是实际却能够播放，本来想放开这个限制的，后来发如今云课堂app的webview中强制播放可能会致使app崩溃，因此最后仍是加上了检测。。
3. 不支持m3u8播放的android通常是android4.0左右及如下的
网易云免费体验馆，0成本体验20+款云产品！
更多网易技术、产品、运营经验分享请点击。
相关文章：
【推荐】 IOS渠道追踪方式
【推荐】 如何解决在线网页挂载本地样式的问题