Отображение субтитров видео в Video.JS с помощью Vue.JS

Question

Я хочу добавить подписи к видео с помощью video.js в vue.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",
          },
        ],
      },

Как теперь добавить информацию о треке? Я пробовал с дополнительным массивом "треков", к сожалению, безуспешно:

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

В videoJS-компоненте я попытался проверить, поступили ли треки. Я вижу это в 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

Не знаю почему, но это сработало, когда я запустил совершенно новый репозиторий. Приведенный выше синтаксис теперь работает хорошо.