So verwenden Sie video.js in Vue zum Abspielen von Videos im M3U8-Format

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

Garn fügt Video.js hinzu
yarn add videojs-contrib-hls // Dies ist ein Plugin, das zum Abspielen von HLS-Streams erforderlich ist yarn add mux.js // Wenn es im Vue-Projekt nicht installiert ist, kann ein Fehler auftreten

importiere "video.js/dist/video-js.css"; // Importiere das CSS von video.js
importiere hls von „videojs-contrib-hls“; // Zum Abspielen des HLS-Streams ist ein Plug-in erforderlich. importiere Vue von „vue“;
Vue.use(hls);

importiere "./plugins/video.js"; // Importiere die soeben definierte Datei video.js

<Vorlage>
 <div Klasse="test-videojs">
 <video id="videoPlayer" class="video-js" stummgeschaltet></video>
 </div>
</Vorlage>
<Skript>
importiere Videojs aus "video.js"; // Videojs importieren 
Standard exportieren {
 Daten() {
 zurückkehren {
 // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 ist ein Video. Sie können cctv1 (eine Live-Übertragung, die nicht zurückgespult werden kann) damit ersetzen, um den Effekt des Vor- und Zurückspulens zu sehen nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
 };
 },
 montiert() {
 dies.initVideo(diese.nowPlayVideoUrl);
 },
 Methoden: {
 initVideo(jetztPlayVideoUrl) {
  // Diese Optionsattribute können auch direkt im Video-Tag gesetzt werden, siehe stummgeschaltet
  let Optionen = {
  autoplay: true, // Automatische Wiedergabesteuerung festlegen: true, // Quellen für Wiedergabesteuerung anzeigen: [
   // Beachten Sie, dass, wenn src als Option festgelegt ist, kein Kanalwechsel möglich ist (auch wenn nowPlayVideoUrl überwacht wird).
   {
   Quelle: nowPlayVideoUrl,
   Typ: „application/x-mpegURL“ // Sagen Sie videojs, dass dies ein HLS-Stream ist}
  ]
  };
  // Der erste Parameter von videojs stellt die ID des Videos im Dokument dar
  const myPlayer = Videojs("videoPlayer", Optionen, Funktion onPlayerReady() {
  console.log("this in onPlayerReady refers to:", this); // dies hier bezieht sich auf Player, eine von Videojs erstellte Instanz console.log(myPlyer === this); // Dies gibt true zurück
  });
 }
 }
};
</Skript>
<style lang="scss">
#videoPlayer {
 Breite: 500px;
 Höhe: 300px;
 Rand: 50px automatisch;
}
</Stil>

<Vorlage>
 <div Klasse="test-videojs">
 <video id="videoPlayer" class="video-js"></video>
 <el-button type="danger" @click="changeSource">Zu CCTV3 wechseln</el-button>
 </div>
</Vorlage>
<Skript>
importiere Videojs aus "video.js"; // Videojs importieren
Standard exportieren {
 Daten() {
 zurückkehren {
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
  Optionen:
  autoplay: true, // Autoplay einstellen muted: true, // Auf true setzen, um die automatische Wiedergabe zu erreichen, und das Video wird stummgeschaltet (Chrome 66 und höher verbietet die automatische Wiedergabe von Audio und Video)
  preload: "auto", // Preload-Steuerung: true // Wiedergabesteuerung anzeigen},
  Spieler:null
 };
 },
 montiert() {
 dies.getVideo(diese.nowPlayVideoUrl);
 },
 Methoden: {
 getVideo(jetztPlayVideoUrl) {
  this.player = Videojs("videoPlayer", this.options);
  //Tastencode, src dynamisch festlegen, um den Kanalumschaltvorgang zu implementieren this.player.src([
  {
   Quelle: nowPlayVideoUrl,
   Typ: „application/x-mpegURL“ // Sagen Sie videojs, dass dies ein HLS-Stream ist}
  ]);
 },
 Quelle ändern() {
  this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
  console.log(this.nowPlayVideoUrl, "geändert");
 }
 },
 betrachten:
 nowPlayVideoUrl(neuerWert, alt) {
  dies.getVideo(newVal);
 }
 },
 vorZerstören() {
 wenn (dieser.Spieler) {
  this.player.dispose(); // Player entfernen, diese Methode setzt den internen Status von videojs zurück und entfernt dom
 }
 }
};
</Skript>
<style lang="scss">
#videoPlayer {
 Breite: 500px;
 Höhe: 300px;
 Rand: 50px automatisch;
}
</Stil>

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

// Quelle dynamisch festlegen
dieser.Player.src([
  {
   Quelle: nowPlayVideoUrl,
   Typ: „application/x-mpegURL“ // Sagen Sie videojs, dass dies ein HLS-Stream ist}
 ]);

Garn fügt mux.js hinzu

importiere "videojs-flash"; // Zum Abspielen des RTMP-Stream-Typs ist ein Plug-in erforderlich: „rtmp/flv“, // Dieser Typwert ist erforderlich, um videojs mitzuteilen, dass dies ein RTMP-Stream-Video ist