0

我想在 vue.js 中使用 video.js 为视频添加字幕。文本轨道的 HTML 符号如下所示:

<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,它从其父级接收选项。

父组件

<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 组件中,我尝试检查是否收到了曲目。我可以在选项对象中看到它,但仍然没有显示标题。

  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";
      }
    }
 }

我究竟做错了什么?

4

1 回答 1

1

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

于 2021-03-15T22:57:52.803 回答