• 首先咱们先说一下本文章只是本人应用的时的坑，并不应用所有的对于video.js
  1. 首先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>
  1. 就是页面应用了，临时也分两种状况
    间接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