Comment afficher dynamiquement les sous-titres via les composants Vue

Avec le développement continu du développement Web moderne, Vue est devenue le choix de plus en plus de développeurs. Dans Vue, le traitement des sous-titres vidéo est peu coûteux et efficace, et il peut également implémenter des fonctions plus complexes.

Voyons maintenant comment créer des sous-titres dans Vue.

Première étape : installer une bibliothèque tierce

Vue n'est pas livré avec une bibliothèque de traitement de sous-titres, nous devons utiliser une bibliothèque tierce. Ici, j'ai choisi une bibliothèque populaire appelée « vtt.js ». Avant l'installation, vous devez installer l'environnement Node.js et l'outil de gestion des packages npm. Une fois l'installation terminée, exécutez la commande suivante dans votre répertoire Vue :

npm install vtt.js --save

Étape 2 : Créer un fichier de sous-titres

Ensuite, nous devons créer un fichier de sous-titres dans le projet. Le format des fichiers de sous-titres peut être SRT, VTT, JSON, etc. Ici nous utilisons le format VTT.

Un fichier de sous-titres VTT le plus simple est le suivant :

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.

Comme vous pouvez le voir, la partie centrale du fichier VTT est une chaîne de texte, qui contient le contenu du sous-titre et son heure d'affichage.

Étape 3 : Implémenter les sous-titres via le composant Vue

Dans le composant Vue, nous pouvons charger et analyser le fichier de sous-titres via l'interface fournie dans la bibliothèque vtt.js, et l'appliquer au lecteur vidéo. Voici le code de base de l'implémentation :

<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>

Grâce au code ci-dessus, nous réalisons le chargement, l'analyse et l'affichage dynamique des sous-titres, rendant la fonction de sous-titres étroitement intégrée au lecteur vidéo, la rendant plus efficace et plus facile à utiliser.

Résumé

Vue fournit une chaîne d'outils puissante qui peut aider les développeurs à créer facilement des applications Web efficaces. Vue propose également une solution pratique pour traiter les sous-titres vidéo. Il nous suffit d'utiliser une bibliothèque tierce pour charger et analyser les sous-titres, puis d'utiliser le composant Vue pour afficher dynamiquement les sous-titres, puis nous pouvons facilement implémenter la fonction de sous-titres vidéo. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!