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

父组件

    <div
          v-for="(item,index) in vedioData"
          :key="index"
          class="play_Video"
        >
          <playVideo
            :Item='item'
            :Index='index'
              v-if='item'
              class="item_Video"
          />

        </div>

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

子组件

<template>
  <!--  -->
  <div class="item_Video" 
              v-if='Item'
  >
      <video
          :id="`my-video${Index}`"
       class="video-js vjs-default-skin  vjs-big-play-centered" controls preload="auto" muted
             style='width: 100%;height: 100%'>
        <source :src="Item" style='width: 100%;height: 100%' type="application/x-mpegURL">
      </video>

  </div>
</template>
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();
}