Video.js + HLS 在production环境下webpack打包后出错的解决方案

Video.js是一个非常强大的视频播放库,能在微信下完美提供inline小窗口播放模式,但当涉及到hls格式视频播放时就比较麻烦,出现的数种现象都不好解决.

错误现象:

1. PC Chrome上提示格式不支持,此问题主要是Chrome本身不支持HLS格式导致的.

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

2. 使用官方推荐的videojs-contrib-hls和videojs-contrib-media-sources插件后,运行时提示webworkify相关问题.

VIDEOJS: WARN: Failed to create SourceBuffers TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at module.exports (webpack:///./~/webworkify/index.js?:10:28)
    at new VirtualSourceBuffer (webpack:///./~/videojs-contrib-media-sources/es5/virtual-source-buffer.js?:91:52)
    at HtmlMediaSource.addSourceBuffer (webpack:///./~/videojs-contrib-media-sources/es5/html-media-source.js?:316:18)
    at createSourceBuffer (webpack:///./~/videojs-contrib-hls/es5/source-updater.js?:40:41)
    at new SourceUpdater (webpack:///./~/videojs-contrib-hls/es5/source-updater.js?:69:7)
    at SegmentLoader.init_ (webpack:///./~/videojs-contrib-hls/es5/segment-loader.js?:497:29)
    at SegmentLoader.mimeType (webpack:///./~/videojs-contrib-hls/es5/segment-loader.js?:388:14)
    at MasterPlaylistController.setupSourceBuffers_ (webpack:///./~/videojs-contrib-hls/es5/master-playlist-controller.js?:1016:31)
    at PlaylistLoader.eval (webpack:///./~/videojs-contrib-hls/es5/master-playlist-controller.js?:301:18)
    at PlaylistLoader.trigger (webpack:///./~/videojs-contrib-hls/es5/stream.js?:95:24)
    at eval (webpack:///./~/videojs-contrib-hls/es5/playlist-loader.js?:384:16)
    at eval (webpack:///./~/videojs-contrib-hls/es5/xhr.js?:63:7)
    at eval (webpack:///./~/once/once.js?:17:15)
    at loadFunc (webpack:///./~/xhr/index.js?:133:9)
    at XMLHttpRequest.readystatechange (webpack:///./~/xhr/index.js?:63:13)

3. 更换为videojs-contrib-hls.js后,在development模式下可正常播放,但production模式下编译时,UglifyJS后运行提示对象未定义,此问题有多种原因,其中我遇到一种比较诡异的,即使不进行UglifyJS也会提示_typeof未定义,这个问题实质上是Babel进行语法转换时出的bug

Uncaught ReferenceError: X is not defined

这里未能一一列举,但所有这些问题在官方问题列表#600中讨论很多,但最终解决方案和注意要点却未能总结清楚.这里将我自己摸出来的方案说一下.

解决方案注意要点:

1. 使用 videojs-contrib-hls.js 代替官方的 videojs-contrib-hls 和 videojs-contrib-media-sources . 如果使用官方插件,需要修改webpack配置,具体请见官方webpack指引 .

2. 最好使用最新版video.js 6.x, 我测试过程中发现5.x和 videojs-contrib-hls.js 兼容性似乎有问题 .

3. babel-loader需要增加exclude配置,不需要处理videojs-contrib-hls.js 的代码.

{
    test: /.jsx?$/,
    loaders: [
        'babel-loader?compact=false'
    ],
    exclude: /(videojs-contrib-hls.js)/,
}

4. 相关的播放代码中,最好能指定视频的 type 为 application/x-mpegURL ,或者文件url的文件名加上扩展名m3u8(iOS中如果无扩展名则无法播放). 另外需要注意的是,如果想在videojs的构造函数中直接指定sources,也会在某些浏览器中导致无法播放.最好是使用src方法指定(此问题我未有时间详细测试).

const player = videojs(this.videoNode, this.props, function onPlayerReady() {
    this.load();
});
player.src({ 
　　src: 'http://someUrl', 
　　type: 'application/x-mpegURL', 
});

或

<video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
  <source
     src="https://example.com/index.m3u8"
     type="application/x-mpegURL">
</video>

5. 为了兼容官方语言包zh-CN,需要让videojs变量全局可访问,这里需要用到 webpack 的 ProvidePlugin

plugins: [
        new webpack.ProvidePlugin({
            "videojs": "video.js",
            "window.videojs": "video.js",
        }),
]