乐趣区

关于vue.js:vue使用video插件播放m3u8以及报错问题

jiezi
  • 首先咱们先说一下本文章只是本人应用的时的坑，并不应用所有的对于 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

退出移动版