Vue コンポーネントを使用して字幕を動的に表示する方法

最新の Web 開発の継続的な発展に伴い、Vue はますます多くの開発者に選ばれるようになりました。 Vue では、ビデオ字幕の処理が低コストで効率的であり、より複雑な関数を実装することもできます。

次に、Vue で字幕を作成する方法を見てみましょう。

ステップ 1: サードパーティ ライブラリをインストールする

Vue には字幕処理ライブラリが付属していないため、サードパーティ ライブラリを使用する必要があります。ここでは「vtt.js」という人気のあるライブラリを選択しました。インストール前に、Node.js 環境と npm パッケージ管理ツールをインストールする必要があります。インストールが完了したら、Vue ディレクトリで次のコマンドを実行します。

npm install vtt.js --save

ステップ 2: 字幕ファイルを作成する

次に、プロジェクトに字幕ファイルを作成する必要があります。字幕ファイルの形式は、SRT、VTT、JSON などです。ここでは VTT 形式を使用します。

最も単純な VTT 字幕ファイルは次のとおりです。

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.

ご覧のとおり、VTT ファイルの中心部分はテキスト文字列であり、これには字幕の内容とその表示時間が含まれます。

ステップ 3: Vue コンポーネントを介して字幕を実装する

Vue コンポーネントでは、vtt.js ライブラリで提供されるインターフェイスを介して字幕ファイルをロードして解析し、それを に適用できます。ビデオプレーヤー。以下は、実装の基本コードです。

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

上記のコードを通じて、字幕の読み込み、解析、および動的表示を実現し、字幕機能をビデオ プレーヤーと緊密に統合し、より効率的かつ効率的にします。使いやすくなります。

概要

Vue は、開発者が効率的な Web アプリケーションを簡単に構築できる強力なツール チェーンを提供します。 Vue には、ビデオ字幕を処理するための便利なソリューションもあります。サードパーティのライブラリを使用して字幕をロードおよび解析し、次に Vue コンポーネントを使用して字幕を動的に表示するだけで、ビデオ字幕機能を簡単に実装できます。この記事がお役に立てば幸いです。

以上がVue コンポーネントを使用して字幕を動的に表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。