写点什么

支持 M3U8 格式播放的方法

作者:CRMEB
  • 2022 年 6 月 16 日
  • 本文字数:799 字

    阅读完需:约 3 分钟

支持 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

用户头像

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步,能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

评论

发布
暂无评论
支持 M3U8 格式播放的方法_CRMEB_InfoQ写作社区