共计 2012 个字符，预计需要花费 6 分钟才能阅读完成。
- 首先咱们先说一下本文章只是本人应用的时的坑，并不应用所有的对于 video.js
- 首先 vue 援用 video.js
援用的 video.js 的版本我就不多说了，7 版本以上不须要 flash，所以很多人都用 5 版本的，这个我首先说一下我本人的感触，我感觉都差不多，我的成果都实现了，本人的意见时，还是用高版本的，这样很多货色，能够兼容。
npm install video.js --save
npm install videojs-contrib-hls --save另一种援用是间接在 html 引入文件，这里依据本人的本地门路本人配置
另外提醒一下，引入的 js 肯定要放在 body 前面，不然会报错
我临时应用是间接引入，我引入的版本 7.0.3 版本，我感觉很好找，高版本的应该也兼容。度娘！！！
<link href="static/video-js.css" rel="stylesheet">
<script src="static/video.js"></script>- 就是页面应用了，临时也分两种状况
间接 npm 的，那就是间接模块引入应用了，我就给你们贴一下，让你们看看
import‘video.js/dist/video-js.css’import videojs from‘video.js’import‘videojs-contrib-hls’这边有可能会出问题，说 css 未找到，具体报错我就不说了，如果批改，就去找一下 node_modules 中 video 的文件夹，门路是不是谬误了，如果谬误了，就批改一下，起因就会版本不同，门路有可能不同。
还有一种起因，是咱们新创建 vue 我的项目时，的一个配置文件没有了，在上面我会给你粘贴一下，如果你没有找到谬误，请看这个是不是短少了！！！
如果短少，本人去看一下，你本人之前的文件是不是有，复制过去就好了，如果真的没有，那就只能度娘了！
！！！如果你是引入文件的形式，那下面一步就没有了
上面就是 HTML 的代码：
<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
style='width: 100%;height: auto'
:poster="poster"
></video>3.js 中的应用，具体的配置我就不说了
data:{
return:{myVideo:{}
}
}mounted() {
// 这个最好要有 this.$nextTick，不然会报第二个谬误，请看上面谬误！！！this.$nextTick(() => {this.getVideoli();
});
}getVideoli() {
this.myVideo = videojs("myVideo",{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
loop: true,
autoplay: true,
hls: {withCredentials: false,}
},function onPlayerReady() {this.on("error", function () {
// 播放过程中因为网络或其余起因产生的期待，此时视频播放暂停，等网络复原后会主动执行【playing】自动播放
// 这里是只有报错就去执行从新申请直播流的函数
});
})
}这外面的一些参数，我就不过多说了，间接搜一下，很多。
重点讲一下回调函数：error 等谬误其余事件名称，本人去搜办法就好了，我这里就不做介绍了，我这里间接介绍我应用的 error 事件，你们应该用这个比拟多。
附上事件链接 video.js 事件
4. 最初报错：
1.css 报错，下面有介绍，我就不说了，之后如果第一种间接 npm 的办法不行的话，间接引入文件，我亲自测试没有问题
2. 第二个就是在运行是，报错，说 ID 谬误
[Vue warn]: Error in mounted hook: "TypeError: The element or ID supplied is not valid. (videojs)"解决方案：首先查看一下，父级是不是 v -if 掉了，换成 v -show
第二、就是看看本人的写没写 this.$nextTick 在执行办法
第三、就是看看本人的 ID 跟 html 上的是否统一
3. 视频卡顿
搜寻了很多卡顿问题解决方案，始终认为没有方法解决，之后看到有回调函数，那就能在回调函数上做文章，后面有代码的具体情况，能够下面看一下事件，以及你想用的办法
5、总结
目前我做的视频直播流，咱们以们 m3u8 的视频流给咱们，所以咱们会呈现卡顿景象，咱们会依据报错的回调函数去从新申请视频流
我也是第一次用 video.js 小白，一路遇到问题就解决问题，如果说得不明确的，请多多包涵。如有不懂问题或交换意见，请即便分割，互相学习。附上 Video.js 官网地址:video.js
