vue 视频监控videojs

···
下载
yarn add video.js
yarn add mux.js

image.png

main.js

import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs

父组件

vedioData:[
"http://*/mag/hls/e00c8baa333c4bb4827113d4661e53d0/0/live.m3u8",
"http:///mag/hls/355156f2195f46c489e9c877bbda16f7/0/live.m3u8",
"http:///mag/hls/9521f33ac3964be5ae5ee08928bdb3b1/0/live.m3u8"
],

子组件

export default {
  props:{
      Item: {
      type: String,
    },
      Index: {
      type: Number,
    },
  },
  methods: { 
     initVideo() {
         this.$nextTick(() => {
          let myPlayer = this.$video(document.getElementById(`my-video${this.Index}`), {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            autoplay: 'muted',
            preload: "auto",
            controlBar:{
              playToggle:true
            }
          }); 
        })
  },
  mounted() {
    this.initVideo();
}