Vue 播放监控m3u8视频流格式 （Video.js）篇

1. 因业务需求，对接监控显示自己的系统中。
2. 前端框架vue
3. 监控返回格式m3u8，视频流格式h264，如果视频流格式是h265的建议先把流转换h264。

4.本篇文章讲解video.js插件播放m3u8
1. npm安装和引入

npm install --save video.js
npm install --save videojs-contrib-hls

2引入对应css
我们需要引入videojs的css文件，例如在main.js中引入

import 'video.js/dist/video-js.css'

3 接着，我们在需要播放视频的页面引入js对象

import videojs from "video.js";
import "videojs-contrib-hls";

vue 页面使用

<video
    id="myvideo"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    width="800px"
>
    <source src="http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" type="application/x-mpegURL" />
</video>

mounted() {
    this.getVideo();
},

methods:{
	getVideo() {
	   videojs(
	       "myvideo",
	       {
	           bigPlayButton: false,
	           textTrackDisplay: false,
	           posterImage: true,
	           errorDisplay: false,
	           controlBar: true
	       },
	       function() {
	           this.play();
	       }
	   );
	}
}

4动态改变标签地址

<button @click="setVideo()">点击切换到CCTV3</button>


setVideo() {
    var myPlayer = videojs("myvideo");
    myPlayer.src([
        {
            type: "application/x-mpegURL",
            src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3频道
        }
    ]);
    myPlayer.play();
}

5 注意事项
如果在页面dom中没有找到对应dom 就会报错 Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs) 的解决办法。

解决办法，等确认dom存在再执行

1.，延迟加载，避免查找dom为空
setTimeout(() => {
	 that.setVideo();
}, 500);

2.   页面渲染完后执行
 this.$nextTick(){
          that.setVideo();
  }

最终就OK了。