vue使用video插件播放m3u8以及报错问题

首先我们先说一下本文章只是自己使用的时的坑，并不使用所有的关于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

小健

vue使用video插件播放m3u8以及报错问题