Ändern Sie den Quellcode des Videos in Vue dynamisch

Vue ist ein beliebtes JavaScript-Framework, das die Erstellung von Benutzeroberflächen vereinfacht. In Vue können wir Daten problemlos an die Ansicht binden, wodurch die Anzeige einiger dynamischer Daten sehr einfach wird. Auch die Videowiedergabe lässt sich in Vue sehr komfortabel steuern. In diesem Artikel wird erläutert, wie Sie den Quellcode eines Videos in Vue dynamisch ändern.

1. Video initialisieren

Zuerst initialisieren Sie Video in der Vue-Komponente. Wir können das HTML-Tag

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  }
}
</script>

Im obigen Beispiel wird ein Datenobjekt definiert, wobei videoSrc die Adresse der Videoquelle darstellt. Wir haben im Vorlagen-Tag der Vue-Komponente ein Video-Tag erstellt und die V-bind-Direktive verwendet, um videoSrc an das src-Attribut des Videos zu binden. Auf diese Weise füllt Vue nach der Initialisierung automatisch den videoSrc-Wert in das Video-Tag.

2. Den Quellcode des Videos dynamisch ändern

Jetzt haben wir ein Video-Tag in der Vue-Komponente erstellt und die Video-Quelladresse erfolgreich eingegeben An sein src-Attribut gebunden. Wenn wir die Videoquelle während der App-Ausführung dynamisch ändern möchten, können wir die Eigenschaft $.refs.videoRef verwenden.

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
    <button @click="changeVideo()">修改视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  },
  methods: {
    changeVideo() {
      this.videoSrc = "/newVideo.mp4";
      this.$refs.videoRef.load();
      this.$refs.videoRef.play();
    },
  }
}
</script>

Im obigen Beispiel haben wir eine Schaltfläche definiert und ein Klickereignis daran gebunden. Wenn der Benutzer auf die Schaltfläche klickt, wird die Methode „changeVideo“ aufgerufen. Bei dieser Methode ändern wir den videoSrc-Wert im Datenobjekt dynamisch. Wenn sich der videoSrc-Wert ändert, aktualisiert das Vue-Framework automatisch das src-Attribut des Video-Tags. Allerdings lädt das Video-Tag den neuen Videostream nicht automatisch neu, daher müssen wir die Methode „load()“ manuell aufrufen, um die neue Videoquelle neu zu laden, und die Methode „play()“ aufrufen, um die Wiedergabe zu starten.

3. Zusammenfassung

In diesem Artikel wird beschrieben, wie Sie den Quellcode eines Videos in Vue dynamisch ändern. Indem wir in der Vue-Komponente ein Video-Tag erstellen und die Video-Quelladresse an sein src-Attribut binden, können wir ganz einfach ein abspielbares Video rendern. Wenn Sie die Videoquelle dynamisch ändern müssen, während die Anwendung ausgeführt wird, verwenden Sie die Eigenschaft „$refs.videoRef“, um einen Verweis auf das Video-Tag abzurufen, und verwenden Sie die Methoden „load()“ und „play()“, um die neue Videoquelle neu zu laden und abzuspielen .

Das obige ist der detaillierte Inhalt vonÄndern Sie den Quellcode des Videos in Vue dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!