How to use video.js in vue to play m3u8 format videos

 "vue": "^2.6.11",
 "video.js": "^7.10.2",
 "videojs-contrib-hls": "^5.15.0",
 "mux.js": "^5.7.0"

yarn add video.js
yarn add videojs-contrib-hls // This is a plugin required to play hls streams yarn add mux.js // In the vue project, if it is not installed, an error may occur

import "video.js/dist/video-js.css"; // Import the CSS of video.js
import hls from "videojs-contrib-hls"; // Plug-in required to play hls stream import Vue from "vue";
Vue.use(hls);

import "./plugins/video.js"; // Import the video.js file just defined

<template>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js" muted></video>
 </div>
</template>
<script>
import Videojs from "video.js"; // Import Videojs 
export default {
 data() {
 return {
 // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 is a video. You can replace cctv1 (which is a live broadcast and cannot be rewound) with it to see the effect of fast forward and rewind nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
 };
 },
 mounted() {
 this.initVideo(this.nowPlayVideoUrl);
 },
 methods: {
 initVideo(nowPlayVideoUrl) {
  // These options attributes can also be set directly on the video tag, see muted
  let options = {
  autoplay: true, // Set automatic playback controls: true, // Display playback controls sources: [
   // Note that if the src is set as option, channel switching cannot be achieved (even if nowPlayVideoUrl is monitored)
   {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // Tell videojs that this is an hls stream}
  ]
  };
  // The first parameter of videojs represents the id of the video in the document
  const myPlayer = Videojs("videoPlayer", options, function onPlayerReady() {
  console.log("this in onPlayerReady refers to:", this); // this here refers to Player, an instance created by Videojs console.log(myPlyer === this); // This returns true
  });
 }
 }
};
</script>
<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

<template>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js"></video>
 <el-button type="danger" @click="changeSource">Switch to CCTV3</el-button>
 </div>
</template>
<script>
import Videojs from "video.js"; // Import Videojs
export default {
 data() {
 return {
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
  options:
  autoplay: true, // Set autoplay muted: true, // Set it to true to achieve automatic playback, and the video will be muted (Chrome 66 and above prohibits automatic playback of audio and video)
  preload: "auto", // Preload controls: true // Display playback controls},
  player:null
 };
 },
 mounted() {
 this.getVideo(this.nowPlayVideoUrl);
 },
 methods: {
 getVideo(nowPlayVideoUrl) {
  this.player = Videojs("videoPlayer", this.options);
  //Key code, dynamically set src to implement channel switching operation this.player.src([
  {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // Tell videojs that this is an hls stream}
  ]);
 },
 changeSource() {
  this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
  console.log(this.nowPlayVideoUrl, "changed");
 }
 },
 watch:
 nowPlayVideoUrl(newVal, old) {
  this.getVideo(newVal);
 }
 },
 beforeDestroy() {
 if (this.player) {
  this.player.dispose(); // Removing Players, this method will reset the internal state of videojs and remove dom
 }
 }
};
</script>
<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

 <video id="videoPlayer" class="video-js" muted></video>

// Dynamically set src
this.player.src([
  {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // Tell videojs that this is an hls stream}
 ]);

yarn add mux.js

import "videojs-flash"; // Plug-in required to play rtmp stream type: 'rtmp/flv', // This type value is required to tell videojs that this is an rtmp stream video