资讯专栏INFORMATION COLUMN

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

Miyang / 939人阅读

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

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

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

去年年中的时候,借着产品改版的机会,将之前的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+款云产品!

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

文章来源: 网易云社区

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/25277.html

相关文章

  • larkplayer: 插件化的 HTML5 放器

    摘要:是一款轻量级易扩展的播放器,是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口,插件不知道插件的存在,因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器,是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案,并且他们往往有自己的定制化需求。 背景 为什么要编写 larkplayer?(注意,这里面有...

    lijy91 评论0 收藏0
  • larkplayer: 插件化的 HTML5 放器

    摘要:是一款轻量级易扩展的播放器,是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口,插件不知道插件的存在,因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器,是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案,并且他们往往有自己的定制化需求。 背景 为什么要编写 larkplayer?(注意,这里面有...

    linkin 评论0 收藏0
  • larkplayer: 插件化的 HTML5 放器

    摘要:是一款轻量级易扩展的播放器,是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口,插件不知道插件的存在,因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器,是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案,并且他们往往有自己的定制化需求。 背景 为什么要编写 larkplayer?(注意,这里面有...

    沈俭 评论0 收藏0
  • Html5直播到互动直播,看直播协议的选择

    摘要:目前,国内主流的直播协议有,适用于不同的直播场景。协议基于,主要内容是关于这个文本协议的。协议中基本的数据单元称为消息。作为苹果提出的直播协议,在端占据了不可撼动的地位,同时又便于传播。 目前,国内主流的直播协议有HLS、RTMP、HTTP FLV,适用于不同的直播场景。 一、HLS、RTMP与HTTP FLV 1.HLS HLS 全称是 HTTP Live Streaming, 是一...

    xzavier 评论0 收藏0
  • 视频直播前端方案

    摘要:视频直播前端方案南洋流媒体本质上是现实的图像,经过编码器压缩,持久化为点播文件或者直播流,经过传输,在终端解码和展示。简称是开发的一套视频直播协议,现在属于。 视频直播前端方案 @(南洋) 流媒体本质上是:现实的图像,经过编码器压缩,持久化为点播文件或者直播流,经过传输,在终端解码和展示。 http live streaming(hls) 适用移动端HTTP Live Streamin...

    EasonTyler 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<