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