vue中 使用video.js 播放m3u8直播流

需求描述

支持播放m3u8直播流 + 录屏 视频；同时可以动态更改视频直播地址，新增，删除视频。

实现效果

实现代码

1. 安装依赖

	npm install video.js --save // 视频播放器插件
	npm install videojs-contrib-hls  --save // 播放hls流插件
	npm install @videojs/http-streaming  --save

2. 具体代码如下：

<template>
  <div id="app">
    <button @click="addvideourl">新增视频直播</button>
    <button @click="changevideourl(0)">更换视频地址 - 录屏</button>
    <button @click="changevideourl2(1)">更换视频地址 - 直播流</button>
    <button @click="delvideourl(src.length - 1)">删除视频</button>
    <div class="video-div">
      <video
        v-for="item in src"
        :id="'video_' + item.id"
        class="video video-js vjs-default-skin"
        preload="auto"
        :key="item.id"
      >
        <source :src="item.src" :type="item.type" />
      </video>
    </div>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css"; //videojs样式
import "videojs-contrib-hls"; //用于支持m3u8
import "@videojs/http-streaming";
export default {
  data() {
    return {
      player: {}, // map对象
      src: [
        {
          type: "application/x-mpegURL",
          id: "111",
          src: "https://jxsr-eye.antelopecloud.cn:1443/api/staticResource/v2/video/live.m3u8/538505008?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDUzOSIsImV4dCI6MTY0MzI1NTgwMTMwNiwidWlkIjoiMTAxMDAzMDAwMjE1IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA3MTZdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMzk5IiwidXNlclR5cGUiOjEwMDcwNCwiaWF0IjoxNjQyOTk2NjAxMzA2fQ.gxhejzqj6Mzi3fU9SjCzZEgT-B6PxSWUgm_1oX0iXvk",
        },
        {
          type: "video/mp4",
          id: "222",
          src: "https://ping.mfyke.com/data/video/1.webm",
        },
      ],
    };
  },
  mounted() {
    this.videoInit();
  },
  methods: {
    videoInit() {
      // 播放器初始化
      this.$nextTick(() => {
        this.player = {};
        this.src.forEach((v) => {
          if (this.player[v.id]) {
            this.player[v.id].src({ src: this.videoUrl, type: "application/x-mpegURL", });
            this.player[v.id].load();
            this.player[v.id].play();
          } else {
            this.player[v.id] = videojs(
              "video_" + v.id,
              {
                bigPlayButton: false,
                textTrackDisplay: false,
                posterImage: true,
                errorDisplay: false,
                controlBar: false,
                muted: true, //静音模式 、、 解决首次页面加载播放。
              },
              function () {
                this.play(); // 自动播放
              }
            );
          }
        });
      });
    },

    //新增
    addvideourl() {
      let obj = {
        id: 333,
        type: "application/x-mpegURL",
        src: "https://jxsr-eye.antelopecloud.cn:1443/api/staticResource/v2/video/live.m3u8/538505006?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDUzOSIsImV4dCI6MTY0MzI1NTgwMTMwNiwidWlkIjoiMTAxMDAzMDAwMjE1IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA3MTZdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMzk5IiwidXNlclR5cGUiOjEwMDcwNCwiaWF0IjoxNjQyOTk2NjAxMzA2fQ.gxhejzqj6Mzi3fU9SjCzZEgT-B6PxSWUgm_1oX0iXvk",
      };
      this.src.push(obj);
      this.videoInit();
    },

    //删除视频
    delvideourl(index = 0) {
      let v = this.src[index];
      if (this.player[v.id]) {
        this.player[v.id].dispose(); // dispose()会直接删除Dom元素 
        this.src.splice(index, 1);
      }
    },

    // 更换视频地址2
    changevideourl(index = 0) {
      let obj = {
        type: "video/mp4",
        src: "https://ping.mfyke.com/data/video/1.webm",
      };
      let v = this.src[index];
      if (this.player[v.id]) {
        this.player[v.id].src({ src: obj.src, type: obj.type });
        this.player[v.id].load();
        this.player[v.id].play();
      }
    },

    // 更换视频地址2
    changevideourl2(index = 1) {
      let obj = {
        type: "application/x-mpegURL",
        src: "https://jxsr-eye.antelopecloud.cn:1443/api/staticResource/v2/video/live.m3u8/538504959?Authorization=eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDExMDAwMDUzOSIsImV4dCI6MTY0MzI1NTgwMTMwNiwidWlkIjoiMTAxMDAzMDAwMjE1IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA3MTZdLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMzk5IiwidXNlclR5cGUiOjEwMDcwNCwiaWF0IjoxNjQyOTk2NjAxMzA2fQ.gxhejzqj6Mzi3fU9SjCzZEgT-B6PxSWUgm_1oX0iXvk",
      };
      let v = this.src[index];
      if (this.player[v.id]) {
        this.player[v.id].src({ src: obj.src, type: obj.type });
        this.player[v.id].load();
        this.player[v.id].play();
      }
    },
  },

  // 离开页面销毁视频播放器
  beforeDestroy() {
   for (let key in this.player) {
       this.player[key].dispose(); // dispose()会直接删除Dom元素
     }
  },
};
</script>

<style>
.video-div {
  display: flex;
  flex-wrap: wrap;
}
.video {
  width: 500px;
  height: 500px;
  margin-top: 2rem;
  margin-left: 24px;
}
</style>