[JavaScript知识库]vue 监控视频

首先，我们需要在vue工程中安装video.js相关依赖。

npm install --save video.js
npm install --save videojs-contrib-hls在这里插入代码片
然后，我们需要引入videojs的css文件，例如在main.js中引入（全局）

import 'video.js/dist/video-js.css'
import "videojs-contrib-hls";
接着，我们在需要播放视频的页面引入js对象

import videojs from "video.js";

<div  v-if="flagFive" style="padding: 15px 40px 30px 40px;width: 720px;height: 420px;">
      <video id="singleVideo" preload="none" class="video-js vjs-default-skin"></video>
</div>
 data () {
    return {      
        singlePlayer: null, //视频流
		}
	},

 handleVideo (idx, name, type) {
      this.flagFive = true;
      this.$nextTick(() => {
        this.singlePlayer = videojs("singleVideo", {
          autoplay: true, //自动播放
          controls: true, //控件显示
          width: "720", //视频框宽度
          height: "420", //视频框高度
        });
        let res = '';
        //多个视频可以分类播放那个
        if (type == 1) {
          res = ""
        } else {
          res = ""
        }
        if (res) {
          this.singlePlayer.src({
            src: res,
            type: "application/x-mpegURL"
          });
          this.singlePlayer.play();
        }
      })
    },
 // 直播视频销毁
    handleFive () {
      this.flagFive = false;
      if (this.singlePlayer) {
        this.singlePlayer.dispose();
      }
    },