vue3 videojs 切换视频地址

环境配置

"element-plus": "^2.2.12",
"video.js": "^7.20.1",
"vue": "^3.2.37",

子组件 Video.vue

<template>
  <video ref="myPlay" class="video-js"></video>
</template>
<script>
import { ref, reactive, toRefs, onMounted, onBeforeMount } from "vue";
import "video.js/dist/video-js.css";
import videojs from "video.js";

export default {
  setup () {
    let player = null; // 妈的vue有bug 这个写成响应式数据 切换video地址会加载不出来
    let myPlay = ref(null);
    let init = reactive({
      options: {
        autoplay: 'auto',
        controls: true,
        fill: true, // 填充模式
      },
    })
    onMounted(() => {
      player = videojs(myPlay.value, init.options)

      player.on("loadstart", function () {
        console.log("开始请求数据 ");
      });
      player.on("progress", function () {
        console.log("正在请求数据 ");
      });
      player.on("loadedmetadata", function () {
        console.log("获取资源长度完成 ");
      });
      player.on("canplaythrough", function () {
        console.log("视频源数据加载完成");
      });
      player.on("waiting", function () {
        console.log("等待数据");
      });
      player.on("play", function () {
        console.log("视频开始播放");
      });
      player.on("playing", function () {
        console.log("视频播放中");
      });
      player.on("pause", function () {
        console.log("视频暂停播放");
      });
      player.on("ended", function () {
        console.log("视频播放结束");
      });
      player.on("error", function () {
        console.log("加载错误");
      });
      player.on("seeking", function () {
        console.log("视频跳转中");
      });
      player.on("seeked", function () {
        console.log("视频跳转结束");

      });
      player.on("ratechange", function () {
        console.log("播放速率改变");
      });
      player.on("timeupdate", function () {
        console.log("播放时长改变");
      });
      player.on("volumechange", function () {
        console.log("音量改变");
      });
      player.on("stalled", function () {
        console.log("网速异常");
      });
    })
    function initVideo(opt) {
      player.src(opt)
      player.play()
    }
    onBeforeMount (() => {
      if(player) player.dispose()
    })



    return {
      myPlay,
      ...toRefs(init),
      initVideo
    }

    
  }

}
</script>

父组件

<template>
  <h1>Videojs</h1>
  <div class="video-box">
    <VideoPlayer ref="videoPlayer"></VideoPlayer>
  </div>
  
  <el-button type="primary" @click="one">第一节</el-button>
  <el-button type="success" @click="two">第二节</el-button>
</template>

<script>
import VideoPlayer from "@/components/Video.vue"
import { ref } from "vue";
export default {
  name: "demo3",
  components: {VideoPlayer},
  setup() {
    let videoPlayer = ref(null);
    function one() {
      videoPlayer.value.initVideo({
        src: 'https://phonetx.qing.mgtv.com/nn_live/nn_x64/cWlkPSZzPWM0MzIyYzM4ZjY0ZTBkZjQwOWM5MDA2NGRiMjQ5NDY3JmVzPTE2NjAxMjU4MjcmdXVpZD02YTYwM2ExMzk5ODdmNTExZTEzYjZjOTFhM2NjOWJmYy02ZWI5MTEwZCZ2PTImYXM9MCZjZG5leF9pZD10eF9waG9uZV9saXZl/KLGMPP360.m3u8',
        type: 'application/x-mpegURL'
      })
    }
    function two() {
      videoPlayer.value.initVideo({
        src: 'https://vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4'
      })
    }
    return {
      videoPlayer,
      one,
      two
    };
  },
};
</script>

<style lang="less" scoped>
.video-box {
  width: 600px;
  height: 300px;
  background-color: aquamarine;
}
</style>