Display video subtitles in Video.JS using Vue.JS

Question

I want to add captions to a video with video.js in vue.js. The HTML-notation for text tracks looks like this:

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

Now, for Vue implementation I have followed the VideoJS docs (https://docs.videojs.com/tutorial-vue.html). There is a component VideoJS, which receives the options from its parent.

Parent component:

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

[...]

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

Now, how can I add the track information? I tried with an additional "tracks" array, unfortunately not successful:

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

In the videoJS-component, I tried to check if the tracks were received. I can see it in the Options-Object, but still no captions shown.

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

What am I doing wrong?

Answer 1

I don't know why, but it worked when I started a completely new repository. The syntax above works well now.