支持M3U8格式播放的方法

当前知识付费使用阿里云web播放器作为视频播放器。阿里云web播放器本身支持MP4和M3U8格式播放,由于知识付费底层引入RequireJS,导致阿里云web播放器Hls扩展插件变成AMD模块,从而将Hls未被全局暴露,进而导致知识付费目前只支持MP4格式播放。

让知识付费支持M3U8格式,就需要将Hls全局暴露。目前有两种方法,一种是在引入RequireJS之前使用script标签引入hls.js文件,这样就可以避免在引入hls.js文件之前全局环境已经存在define.amd,从而暴露Hls全局变量。另一种是使用RequireJS的require()引入hls.js,然后将Hls挂载到全局对象。

  1. script标签引入

如上图所示,必须写在block name=”head_top”模块中,否则无效。因为这个block在requirejs所在block之前。这里的block属于thinkphp内容。

如上图所示,这是aliplayer.js中对于Hls的使用,故而Hls必须挂载到全局对象,否则不能获取到Hls对象。

  1. require()引入

如上图,在require.config的paths中配置好aliplayer、aliplayer-hls和aliplayer-plugin。其中aliplayer-plugin是作为中间模块使用。

如上图所示,这是aliplayer-plugin模块,在这个模块中将Hls挂载到全局对象。这样整个流程就可以正常运行。

其实两种方法的最终目的都是将Hls暴露出来,这样后续功能才可以正常运行,不管哪一种方法,主要看整个项目规范和功能实现的难易程度。具体运行中会怎么样,还需要不断地测试和读懂aliplayer在一些关键点的处理方式。

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址:
http://github.crmeb.net/u/defu

Github 地址:
http://github.crmeb.net/u/defu

{{o.name}}
{{m.name}}

猜你喜欢

转载自my.oschina.net/u/5168284/blog/5540503