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

Video.js + HLS 在production环境下webpack打包后出错的解决方案的更多相关文章

  1. webpack打包后不能调用,改用uglifyjs打包压缩

    背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将j ...

  2. 简要分析webpack打包后代码

    开门见山 1.打包单一模块 webpack.config.js module.exports = { entry:"./chunk1.js", output: { path: __ ...

  3. 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

    查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...

  4. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  5. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...

  6. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  7. ruby -- 进阶学习(十一)配置解决production环境下无法加载css或js

    最近配置production环境,找了好几份文档,从傻逼到苦逼~~终于配置成功~~@_@!!! 首先,先加载以下几个插件: # Use Uglifier as compressor for JavaS ...

  8. ruby -- 进阶学习(十三)解说ckeditor在production环境下如何完整显示

    将ROR项目从development环境改为production环境时,运行rake assets:precompile后, ckeditor的界面就无法完整显示?! @_@?? 出现 ActionC ...

  9. [原创]python MySQLdb在windows环境下的安装、出错问题以及解决办法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 问题:windows下安装MySQLdb的方法 解析:python没有php那种集成环境,比如wamp那种集成软件直接把所有需要的东西全部一次性搭 ...

随机推荐

  1. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  2. 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法

    笔者在之前已经写了一系列的关于RestTemplate的文章,如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层HT ...

  3. Git clone时出现fatal:the remote end hung up unexpectedly

    以HTTPS方式进行git clone时出现如下错误: 方法1:增大缓存 git config http.postBuffer 524288000 尝试无效: 方法2:配置git的最低速度和最低速度时 ...

  4. CentOS基础操作

    一.修改IP地址 vim  ../etc/sysconfig/network-scripts/ifcfg-ens33 在文件中修改或添加以下内容 TYPE=Ethernet PROXY_METHOD= ...

  5. Java线上问题排查神器Arthas快速上手与原理浅谈

    前言 当你兴冲冲地开始运行自己的Java项目时,你是否遇到过如下问题: 程序在稳定运行了,可是实现的功能点了没反应. 为了修复Bug而上线的新版本,上线后发现Bug依然在,却想不通哪里有问题? 想到可 ...

  6. 不要再问我 in,exists 走不走索引了

    微信搜『烟雨星空』,获取最新好文. 前言 最近,有一个业务需求,给我一份数据 A ,把它在数据库 B 中存在,而又比 A 多出的部分算出来.由于数据比较杂乱,我这里简化模型. 然后就会发现,我去,这不 ...

  7. 使用BeetleX在Linux下部署.NET多站点服务

    ​      在windows下常用IIS来部署.NET的多站点服务,但在Linux下就没这么方便了:虽然可以使用一些代理服务器如nginx,jexus等来反代或部署应用,但nginx对.NET应用的 ...

  8. 用aop去解决事物问题(tx)记录学习之aop1.2

    上一个文章我们了解了什么事aop,以及aop的使用方法,主要是把自己想要加入的通知(advice)加入到我们的方法里, 比如上一章我们说的事把myadvice类中的before方法织入到userser ...

  9. 基于Celery在多台云服务器上实现分布式

    起源 最近参加公司里的一个比赛,比赛内容里有一项是尽量使用分布式实现项目.因为项目最终会跑在jetsonnano,一个贼卡的开发板,性能及其垃圾.而且要求使用python? 找了很多博客,讲的真的是模 ...

  10. 在一台电脑上,添加多个Git的ssh key

    Git的第一套公秘钥默认名为 id_rsa ,如果你想要生成另外一个公钥,比如 aysee ,你也可以使用任何你喜欢的名字. 步骤如下:(总共四大操作) 一.生成ssh key 1.生成一个新的自定义 ...