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",
        }),
]