Cara memaparkan sari kata secara dinamik melalui komponen Vue

Dengan pembangunan berterusan pembangunan web moden, Vue telah menjadi pilihan semakin ramai pembangun. Dalam Vue, pemprosesan sari kata video adalah kos rendah dan cekap, dan ia juga boleh melaksanakan beberapa fungsi yang lebih kompleks.

Seterusnya, mari kita lihat cara membuat sari kata dalam Vue.

Langkah pertama: Pasang pustaka pihak ketiga

Vue tidak disertakan dengan pustaka pemprosesan sari kata, kami perlu menggunakan pustaka pihak ketiga. Di sini saya telah memilih perpustakaan popular yang dipanggil 'vtt.js'. Sebelum pemasangan, anda perlu memasang persekitaran Node.js dan alat pengurusan pakej npm. Selepas pemasangan selesai, jalankan arahan berikut dalam direktori Vue anda:

npm install vtt.js --save

Langkah 2: Buat fail sari kata

Seterusnya, kita perlu mencipta fail sari kata dalam projek. Format fail sari kata boleh SRT, VTT, JSON, dsb. Di sini kami menggunakan format VTT.

Fail sari kata VTT yang paling mudah adalah seperti berikut:

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.

Seperti yang anda lihat, bahagian teras fail VTT ialah rentetan teks, yang mengandungi kandungan sari kata dan masa paparannya .

Langkah 3: Laksanakan sari kata melalui komponen Vue

Dalam komponen Vue, kami boleh memuatkan dan menghuraikan fail sari kata melalui antara muka yang disediakan dalam pustaka vtt.js, dan menggunakannya dalam pemain video. Berikut ialah kod asas untuk pelaksanaan:

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

Melalui kod di atas, kami menyedari pemuatan, penghuraian dan paparan dinamik sari kata, menjadikan fungsi sari kata terintegrasi rapat dengan pemain video, menjadikannya lebih cekap dan mudah digunakan.

Ringkasan

Vue menyediakan rangkaian alat berkuasa yang boleh membantu pembangun membina aplikasi web yang cekap dengan mudah. Vue juga mempunyai penyelesaian yang mudah untuk memproses sari kata video. Kami hanya perlu menggunakan pustaka pihak ketiga untuk memuatkan dan menghuraikan sari kata, dan kemudian menggunakan komponen Vue untuk memaparkan sari kata secara dinamik, dan kemudian kami boleh melaksanakan fungsi sari kata video dengan mudah. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Cara memaparkan sari kata secara dinamik melalui komponen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!