So zeigen Sie Untertitel dynamisch über Vue-Komponenten an

Mit der kontinuierlichen Weiterentwicklung der modernen Webentwicklung ist Vue zur Wahl von immer mehr Entwicklern geworden. In Vue ist die Verarbeitung von Videountertiteln kostengünstig und effizient und es können auch einige komplexere Funktionen implementiert werden.

Jetzt schauen wir uns an, wie man Untertitel in Vue erstellt.

Schritt eins: Drittanbieterbibliothek installieren

Vue wird nicht mit einer Untertitelverarbeitungsbibliothek geliefert, wir müssen eine Drittanbieterbibliothek verwenden. Hier habe ich eine beliebte Bibliothek namens „vtt.js“ ausgewählt. Vor der Installation müssen Sie die Node.js-Umgebung und das NPM-Paketverwaltungstool installieren. Nachdem die Installation abgeschlossen ist, führen Sie den folgenden Befehl in Ihrem Vue-Verzeichnis aus:

npm install vtt.js --save

Schritt 2: Erstellen Sie eine Untertiteldatei

Als nächstes müssen wir eine Untertiteldatei in erstellen Projekt. Das Format der Untertiteldateien kann SRT, VTT, JSON usw. sein. Hier verwenden wir das VTT-Format.

Eine einfachste VTT-Untertiteldatei sieht wie folgt aus:

WEBVTT

1
00:00:00.000 --> 00:00:05.000
Hello World!

2
00:00:05.000 --> 00:00:10.000
My name is Alice.

3
00:00:10.000 --> 00:00:15.000
And I am a Vue developer.

Wie Sie sehen können, ist der Kernteil der VTT-Datei eine Textzeichenfolge, die den Untertitelinhalt und seine Inhalte enthält Anzeigezeit.

Schritt 3: Untertitel über die Vue-Komponente implementieren

In der Vue-Komponente können wir Untertiteldateien über die in der vtt.js-Bibliothek bereitgestellte Schnittstelle laden und analysieren und anwenden es auf den Videoplayer. Das Folgende ist der Grundcode der Implementierung:

<template>
  <div>
    <video ref="videoPlayer" />
    <div class="subtitle" />
  </div>
</template>

<script>
import vttjs from 'vtt.js';

export default {
  data() {
    return {
      subtitle: null, // 存储字幕数据
      subtitleElement: null, // 存储字幕显示位置
    };
  },
  mounted() {
    // 异步加载并解析字幕文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'your.vtt', true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const parser = new vttjs.WebVTT.Parser(window, vttjs, 'default');
        parser.oncue = cue => {
          this.subtitle.cues.push(cue);
        };
        // 完成解析
        parser.onparsingerror = () => {
          console.error('解析字幕文件出错');
        };
        parser.onflush = () => {
          const subtitleElement = this.$el.querySelector('.subtitle');
          // 存储字幕显示位置
          this.subtitleElement = subtitleElement;
        };
        // 开始解析字幕文件
        parser.parse(xhr.responseText);
      }
    };
    xhr.onerror = () => {
      console.error('无法加载字幕文件');
    };
    xhr.send();

    // 创建视频播放器
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.addEventListener('timeupdate', this.handleTimeUpdated);
  },
  beforeDestroy() {
    // 移除视频播放器
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.removeEventListener('timeupdate', this.handleTimeUpdated);
  },
  methods: {
    handleTimeUpdated() {
      // 根据当前时间显示对应的字幕
      const videoPlayer = this.$refs.videoPlayer;
      const currentTime = videoPlayer.currentTime;
      const cues = this.subtitle.cues;
      for (let i = 0; i < cues.length; i++) {
        const cue = cues[i];
        if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
          this.subtitleElement.innerHTML = cue.text;
          return;
        }
      }
      // 当前时间没有对应的字幕，清空字幕显示
      this.subtitleElement.innerHTML = &#39;&#39;;
    },
  },
};
</script>

Durch den obigen Code realisieren wir das Laden, Parsen und dynamische Anzeigen von Untertiteln, wodurch die Untertitelfunktion eng in den Videoplayer integriert wird und dadurch besser wird effizienter und einfacher zu bedienen.

Zusammenfassung

Vue bietet eine leistungsstarke Toolkette, die Entwicklern dabei helfen kann, auf einfache Weise effiziente Webanwendungen zu erstellen. Vue bietet auch eine praktische Lösung für die Verarbeitung von Videountertiteln. Wir müssen lediglich eine Bibliothek eines Drittanbieters zum Laden und Analysieren von Untertiteln verwenden und dann die Vue-Komponente verwenden, um die Untertitel dynamisch anzuzeigen. Anschließend können wir die Video-Untertitelfunktion problemlos implementieren. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Untertitel dynamisch über Vue-Komponenten an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!