最近公司要求开发一个播放监控的功能，要求是从列表点击后打开弹窗播放M3U8格式的视频，

首先安装videojs相关依赖：

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

 在页面中添加引用：

import videoJs from 'video.js'
import "videojs-contrib-hls"
import 'video.js/dist/video-js.css'

在使用<video>标签成功实现播放功能后，发现即使关闭了弹窗，后台依然在占用资源抓取视频流，查找videojs的官方文档找到了一个pause()暂停事件，在弹窗关闭事件中调用了pause()方法后，结果只是视频暂停了播放，但后台依然在抓取资源，反复查找资料后，找到了一篇博客解决了相关问题（vue中使用videojs，关闭窗口后视频流一直刷新问题_Qin的专栏-CSDN博客）。

template中的代码：

<template>
  <el-dialog
    :title="cameraName"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    @close="closeVideo"
  >

    <div v-html="videoHtml">
    </div>

  </el-dialog>
</template>

 method中的方法：

    methods: {
      //打开弹窗
      open(cameraName, videoUrl) {
        this.dialogVisible = true
        this.cameraName = cameraName
        this.$nextTick(() => {
          this.getVideo(videoUrl)
        })
      },
      //初始化播放器
      getVideo(url) {
        this.videoHtml = '<video id="videoPlayer" class="video-js vjs-default-skin" width="640px" controls></video>';
        this.$nextTick(() => {
          let options = {
            autoplay: true, // 设置自动播放
            controls: true, // 显示播放的控件
            sources: [ //如果需要切换视频源，src需要动态设置
              {
                src: url,
                type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
              }
            ]
          };
          // videoJs的第一个参数表示的是，文档中video的id
          this.player = videoJs("videoPlayer", options);
        })
      },
      //通过移除DOM彻底关闭视频，避免关闭窗口后依然获取视频流占用资源
      closeVideo() {
        // let myPlayer = videoJs("my-video");
        // videojs的暂停播放方法无效
        // myPlayer.pause()
        if (this.player) {
          this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom
          this.videoHtml = '';
        }
        //注意关闭窗口时间，要在控件销毁之后，否则会有问题
        this.dialogVisible = false
      }
    }

最终效果