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

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

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

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

  1. 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文件会更大一些。个人觉得为了提高代码的可维护性,牺牲部分的文件大小也是可取的。

  1. 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+款云产品!

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

文章来源: 网易云社区

相关推荐