使用 Vue.JS 在 Video.JS 中显示视频字幕

Question

我想在 vue.js 中为带有 video.js 的视频添加字幕。文本轨道的 HTML-notation 如下所示：

<video>
  <source src="myVideo.webm" type="video/webm">
  <track kind="captions" src="myCaptions.vtt" srclang="en" label="English" default>
</video>

现在，对于 Vue 实现，我遵循了 VideoJS 文档 (https://docs.videojs.com/tutorial-vue.html)。有一个组件 VideoJS，它从其 parent.

接收选项

Parent分量:

<template>
  <div>
    <video-player :options="videoOptions"/>
  </div>
</template>

[...]

      videoOptions: {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: require("myVideo.mp4"),
            type: "video/mp4",
          },
        ],
      },

现在，如何添加曲目信息？我尝试了一个额外的“tracks”数组，不幸的是没有成功：

      videoOptions: {
        sources: [... same as above ...],
        tracks: [
          {
            kind: "captions",
            src: require("myCaptions.vtt"),
            srclang: "de",
            label: "german",
          },
        ],
      },

在 videoJS-component 中，我尝试检查是否收到曲目。我可以在 Options-Object 中看到它，但仍然没有显示字幕。

  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      this.options,
      function onPlayerReady() {
        console.log("onPlayerReady", this);
      },
    );
    var tracks = this.player.textTracks();
    console.log(tracks); // returns "[object Object]"

    for (var i = 0; i < tracks.length; i++) {
      var track = tracks[i];
      if (track.kind === "captions") {
        console.log(track.src); // Never called
        track.mode = "showing";
      }
    }
 }

我做错了什么？

Answer 1

我不知道为什么，但是当我启动一个全新的存储库时它起作用了。上面的语法现在运行良好。

使用 Vue.JS 在 Video.JS 中显示视频字幕

Display video subtitles in Video.JS using Vue.JS

video.js

vue.js

videojs-transcript