Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player

npm installiere vue-video-player --save

VideoPlayer von „vue-video-player“ importieren
erfordern('video.js/dist/video-js.css')
erfordern('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

<el-tree :data="KapitelOptionen"
     :props="StandardProps"
     Knotenschlüssel='id'
     Highlight-aktuell
     :filter-node-method="Filterknoten"
     ref="Baum"
     Standardmäßig alles erweitern
     @node-click="handleNodeClick" />
<video-player ref="videoPlayer"
        Klasse = "Videoplayer vjs-custom-skin"
        Stil="Breite: 1000px;Höhe: 576px;Anzeige: Inline-Flex"
        :playsinline="wahr"
        :Optionen="Spieleroptionen"
        @pause="beiPlayerPause($event)"
        @ended="beiPlayerEnded($event)"
        @play="beiPlayerPlay($event)"
        @timeupdate="beiPlayerTimeupdate($event)"
        @ready="Spieler bereit"
    />
<Skript>
importiere { videoPlayer } von 'vue-video-player'
importiere 'video.js/dist/video-js.css'
importiere „vue-video-player/src/custom-theme.css“
importiere { treeselect } aus "@/api//driver/videoChapter";
importiere Treeselect aus „@riophae/vue-treeselect“;
importiere "@riophae/vue-treeselect/dist/vue-treeselect.css";
Standard exportieren {
 Name: "videoPlayer",
 Komponenten: { Treeselect, videoPlayer },
 Daten() {
 zurückkehren {
  //Benutzerinformationen user:{},
  //===============================
  pausiert: wahr,
  Lerndauer:
  userId: '', //Benutzer-ID
  chapterId:'', //Kapitel-ID
  timeLog: '', //Videowiedergabezeit},
 
  Spieleroptionen: {
  playbackRates: [0.5, 1.0, 1.5, 2.0], //Wiedergabegeschwindigkeit autoplay: false, // Wenn wahr, startet der Browser die Wiedergabe, wenn sie bereit ist.
  stummgeschaltet: false, // Standardmäßig wird sämtliches Audio stummgeschaltet.
  loop: false, // Bewirkt, dass das Video neu gestartet wird, sobald es endet.
  preload: „auto“, // Gibt an, ob der Browser mit dem Herunterladen der Videodaten beginnen soll, nachdem das <video>-Element geladen wurde. auto Der Browser wählt das beste Verhalten und beginnt sofort mit dem Laden des Videos (sofern der Browser dies unterstützt).
  Sprache: 'zh-CN',
  aspectRatio: „16:9“, // Setzen Sie den Player in den Flüssigkeitsmodus und verwenden Sie diesen Wert bei der Berechnung der dynamischen Größe des Players. Der Wert sollte ein Verhältnis darstellen – zwei durch einen Doppelpunkt getrennte Zahlen (z. B. „16:9“ oder „4:3“).
  fluid: true, // Wenn wahr, hat der Video.js-Player eine flüssige Größe. Mit anderen Worten: Es wird proportional skaliert, um in den Container zu passen.
  Quellen:
   {
   Typ: „video/mp4“, // Hier werden viele Typen unterstützt: grundlegendes Videoformat, Live-Übertragung, Streaming-Medien usw. Weitere Einzelheiten finden Sie im Git-URL-Projekt src: „// URL-Adresse}“
  ],
  hls: stimmt,
  Poster: „“, // Breite Ihrer Titeladresse: document.documentElement.clientWidth, // Breite des Players notSupportedMessage: „Dieses Video kann momentan nicht abgespielt werden. Bitte versuchen Sie es später erneut.“, // Ermöglicht Ihnen, die Standardmeldung zu überschreiben, die angezeigt wird, wenn Video.js die Medienquelle nicht abspielen kann.
  Kontrollleiste: {
   //Das Trennzeichen zwischen der aktuellen Zeit und der Dauer timeDivider: true,
   //Anzeigedauer durationDisplay: true,
   // Ob die verbleibende Zeit angezeigt werden soll Funktion remainderTimeDisplay: false,
   //Vollbild-Schaltfläche fullscreenToggle: true
  }
  }
 };
},
berechnet: {
 Spieler() {
  returniere dies.$refs.videoPlayer.player //Benutzerdefinierte Wiedergabe}
 },
montiert () {
 dieser.Timer = setzeIntervall(dieses.putLearningObj, 3000)
 },
zerstört () {
 // Wenn der Timer läuft, schalte ihn aus if (this.timer) {
  Intervall löschen(dieser.Timer)
  }
 },
Methoden: {
 //Benutzerinformationen getUser() {
  getUserProfile().then(Antwort => {
  dieser.Benutzer = Antwort.Daten;
  diese.learningDuration.userId = dieser.user.userId
  });
 },
  //============================
 Vollbild() {
  const player = this.$refs.videoPlayer.player
  player.requestFullscreen() //Rufen Sie die Vollbild-API-Methode player.isFullscreen(true) auf
  Spieler.spielen()
 },
 beiPlayerPlay(Spieler) {
  dies.paused = false
  // Spieler.spielen()
 },
 beiPlayerPause (Spieler) {
  dies.paused = wahr
  // console.log('beiSpielerPause!', Spieler)
 },
 onPlayerEnded (Spieler) {
  dies.paused = falsch;
  // Intervall löschen(dieser.Timer);
 },
 //Wird ausgelöst, wenn sich die aktuelle Wiedergabeposition ändert.
 onPlayerTimeupdate (Spieler) {
  // console.log('beiPlayerTimeupdate!', this.timeLog)
 },
 /* Videofortschritt festlegen */
 playerReadied: Funktion (Spieler) {
 },
};
</Skript>

 /** Dropdown-Baumstruktur der Abfrageabteilung*/
 getTreeselect() {
  treeselect().then((Antwort) => {
  //Abdeckung var img = '';
  dies.ChapterOptions = Antwort.Daten;
  für (lass i = 0; i < this.ChapterOptions.length ; i++) {
   dieser.videoName = dieser.ChapterOptions[0].children[0].chapterName
   this.videoIntroduce = this.ChapterOptions[0].children[0].chapterIntroduce
   diese.VideoUrl = JSON.parse(diese.ChapterOptions[0].children[0].videoAddress)
   img = JSON.parse(diese.ChapterOptions[0].children[0].imageAddress)
   //Initialisiere die Abdeckung für (let j = 0; j <img.length; j++) {
   dies.playerOptions.poster =img[0];
   }
   //Initialisiere das erste Kapitelvideo für (let j = 0; j <this.VideoUrl.length; j++) {
   diese.playerOptions.sources[0].src = diese.VideoUrl[0]
   }
   //Kapitel initialisieren this.learningDuration.chapterId = this.ChapterOptions[0].children[0].id;
   //Standardmäßig ersten Kapitelknoten hervorheben this.$nextTick(()=>{
   dies.$refs.tree.setCurrentKey(diese.ChapterOptions[0].children[0].id);
   })
  }
  });
 },
 // Filterknoten filterNode(value, data) {
  wenn (!Wert) gibt true zurück;
  gibt data.label.indexOf(Wert) zurück !== -1;
 },
 // Knotenklickereignis handleNodeClick(data) {
  // konsole.log(Daten)
  var img = '';
  //Originalvideo aktualisieren, Originalcover this.playerOptions.sources[0].src = '';
  dies.playerOptions.poster = '';
  //Video konvertieren this.VideoUrl = JSON.parse(data.videoAddress);
  // konsole.log("diese.VideoUrl")
  für (lass i = 0; i < this.VideoUrl.length ; i++) {
  diese.playerOptions.sources[0].src = diese.VideoUrl[0];
  }
  img = JSON.parse(Daten.Bildadresse);
  für (sei i = 0; i < img.length ; i++) {
  dies.playerOptions.poster = img[0];
  }
  // console.log("this.playerOptions.sources[0].src")
  // Konsole.log(diese.PlayerOptions.Sources[0].src)
  //Kapiteleinführung this.videoIntroduce = data.chapterIntroduce;
  //Kapitelname this.videoName = data.chapterName;
  //Kapitel-ID
  this.learningDuration.chapterId = Daten-ID
  // Konsole.log(dieses.videoIntroduce)
 },

berechnet: {
 Spieler() {
  returniere dies.$refs.videoPlayer.player //Benutzerdefinierte Wiedergabe}
 },
 montiert () {
 dieser.Timer = Intervall festlegen(dieses.putLearningObj, 3000)
 },
 zerstört () {
 // Wenn der Timer läuft, schalte ihn aus if (this.timer) {
  Intervall löschen(dieser.Timer)
  }
 },
Methoden: {  
setzeLernObj() {
  wenn (!diese.paused) {
  //Videofortschritt speichern saveTime(this.learningDuration)
  console.log('putLearningObj ~~~~~~~~~~~')
  }
 },
//Wird ausgelöst, wenn sich die aktuelle Wiedergabeposition ändert.
onPlayerTimeupdate (Spieler) {
 this.learningDuration.timeLog = Spieler.cache_.currentTime
  // console.log('beiPlayerTimeupdate!', this.timeLog)
 },
},

// Videofortschritt speichern Exportfunktion saveTime(data) {
 Rückgabeanforderung({
 URL: '/***/****/***/',
 Methode: 'put',
 Daten: Daten
 })
}

/* Videofortschritt festlegen */
playerReadied: Funktion (Spieler) {
//Hier können Sie die Methode zur Hintergrundinteraktion aufrufen …
Spieler.aktuelleZeit(diese.Lerndauer.ZeitLog)
},