您的位置：首页 > Web前端 > JavaScript

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

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

错误现象:

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

VIDEOJS:ERROR:(CODE:4MEDIA_ERR_SRC_NOT_SUPPORTED)Themediacouldnotbeloaded,eitherbecausetheserverornetworkfailedorbecausetheformatisnotsupported.


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

VIDEOJS:WARN:FailedtocreateSourceBuffersTypeError:Cannotconvertundefinedornulltoobject
atFunction.keys(<anonymous>)
atmodule.exports(webpack:///./~/webworkify/index.js?:10:28)
atnewVirtualSourceBuffer(webpack:///./~/videojs-contrib-media-sources/es5/virtual-source-buffer.js?:91:52)
atHtmlMediaSource.addSourceBuffer(webpack:///./~/videojs-contrib-media-sources/es5/html-media-source.js?:316:18)
atcreateSourceBuffer(webpack:///./~/videojs-contrib-hls/es5/source-updater.js?:40:41)
atnewSourceUpdater(webpack:///./~/videojs-contrib-hls/es5/source-updater.js?:69:7)
atSegmentLoader.init_(webpack:///./~/videojs-contrib-hls/es5/segment-loader.js?:497:29)
atSegmentLoader.mimeType(webpack:///./~/videojs-contrib-hls/es5/segment-loader.js?:388:14)
atMasterPlaylistController.setupSourceBuffers_(webpack:///./~/videojs-contrib-hls/es5/master-playlist-controller.js?:1016:31)
atPlaylistLoader.eval(webpack:///./~/videojs-contrib-hls/es5/master-playlist-controller.js?:301:18)
atPlaylistLoader.trigger(webpack:///./~/videojs-contrib-hls/es5/stream.js?:95:24)
ateval(webpack:///./~/videojs-contrib-hls/es5/playlist-loader.js?:384:16)
ateval(webpack:///./~/videojs-contrib-hls/es5/xhr.js?:63:7)
ateval(webpack:///./~/once/once.js?:17:15)
atloadFunc(webpack:///./~/xhr/index.js?:133:9)
atXMLHttpRequest.readystatechange(webpack:///./~/xhr/index.js?:63:13)




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

UncaughtReferenceError:Xisnotdefined


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

解决方案注意要点:

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

2.最好使用最新版video.js6.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方法指定(此问题我未有时间详细测试).


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



或

<videoid=example-videowidth=960height=540class="video-jsvjs-default-skin"controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video>


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

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

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航