如何在vue-video-player中添加字幕？

在vue-video-player中添加字幕，可以通过以下步骤实现：

1. 首先，需要将字幕文件保存在服务器上，并确保字幕文件的格式为.vtt或.srt。

2. 在Vue组件中，使用`track`标签来添加字幕。例如：

<vue-video-player ref="videoPlayer" :options="playerOptions">
  <track label="English" kind="subtitles" src="/path/to/subtitles.vtt" default>
</vue-video-player>

其中，`label`属性指定字幕的显示名称，`kind`属性指定字幕的类型，`src`属性指定字幕文件的路径，`default`属性指定该字幕是否为默认字幕。

3. 在Vue组件的`data`选项中，添加`playerOptions`对象，并在该对象中添加`tracks`属性，将字幕文件的相关信息添加到该属性中。例如：

data() {
  return {
    playerOptions: {
      sources: [{
        type: 'video/mp4',
        src: '/path/to/video.mp4'
      }],
      tracks: [{
        kind: 'subtitles',
        src: '/path/to/subtitles.vtt',
        srclang: 'en',
        label: 'English',
        default: true
      }]
    }
  }
}

其中，`tracks`属性是一个数组，每个元素表示一个字幕文件的相关信息，包括`kind`、`src`、`srclang`、`label`和`default`属性。

4. 最后，在Vue组件的`mounted`钩子函数中，调用`addTextTrack`方法将字幕文件添加到视频中。例如：

mounted() {
  const video = this.$refs.videoPlayer.video
  const track = video.addTextTrack('subtitles', 'English', 'en')
  track.src = '/path/to/subtitles.vtt'
  track.mode = 'showing'
}

其中，`addTextTrack`方法用于创建一个新的`TextTrack`对象，该对象表示一个字幕轨道。`src`属性指定字幕文件的路径，`mode`属性指定字幕的显示模式。