How to dynamically display subtitles through Vue components

With the continuous development of modern web development, Vue has become the choice of more and more developers. In Vue, processing video subtitles is low-cost and efficient, and it can also implement some more complex functions.

Next, let’s take a look at how to create subtitles in Vue.

Step one: Install third-party library

Vue does not come with a subtitle processing library, we need to use a third-party library. Here I have chosen a popular library called ‘vtt.js’. Before installation, you need to install the Node.js environment and npm package management tool. After the installation is complete, run the following command in your Vue directory:

npm install vtt.js --save

Step 2: Create a subtitle file

Next, we need to create a subtitle file in the project. The format of subtitle files can be SRT, VTT, JSON, etc. Here we use VTT format.

A simplest VTT subtitle file is as follows:

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.

As you can see, the core part of the VTT file is a text string, which contains the subtitle content and its display time.

Step 3: Implement subtitles through the Vue component

In the Vue component, we can load and parse the subtitle file through the interface provided in the vtt.js library, and apply it to in the video player. The following is the basic code of the implementation:

<template>
  <div>
    <video></video>
    <div></div>
  </div>
</template>

<script>
import vttjs from &#39;vtt.js&#39;;

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

    // 创建视频播放器
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.addEventListener(&#39;timeupdate&#39;, this.handleTimeUpdated);
  },
  beforeDestroy() {
    // 移除视频播放器
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.removeEventListener(&#39;timeupdate&#39;, 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>

Through the above code, we realize the loading, parsing and dynamic display of subtitles, making the subtitle function closely integrated with the video player, making it more efficient and easier to use.

Summary

Vue provides a powerful tool chain that can help developers easily build efficient web applications. Vue also has a convenient solution for processing video subtitles. We only need to use a third-party library to load and parse subtitles, and then use the Vue component to dynamically display the subtitles, and then we can easily implement the video subtitle function. Hope this article is helpful to you.

The above is the detailed content of How to dynamically display subtitles through Vue components. For more information, please follow other related articles on the PHP Chinese website!