让知识付费系统视频支持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 挂载到全局对象。
script 标签引入

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

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

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

如上图所示，这是 aliplayer-plugin 模块，在这个模块中将 Hls 挂载到全局对象。这样整个流程就可以正常运行。
其实两种方法的最终目的都是将 Hls 暴露出来，这样后续功能才可以正常运行，不管哪一种方法，主要看整个项目规范和功能实现的难易程度。具体运行中会怎么样，还需要不断地测试和读懂 aliplayer 在一些关键点的处理方式。

欢迎技术交流 QQ: 735660248