0

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?

Mia Temma
  • 53
  • 9
  • Try removing your two usages of "require()". Require is used to reference javascript code, not to reference client-side data files. [ https://stackoverflow.com/questions/9901082/what-is-this-javascript-require ] – David Mar 15 '21 at 14:54
  • Hi Dave, thanks for your help!. I tried to give the path directly by src: ".../data/myCaption.vtt", but then I get a "Text track parsing error". Nevertheless, I solved it by starting in a completely new repository... don't know why... – Mia Temma Mar 15 '21 at 22:57

1 Answers1

1

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

Mia Temma
  • 53
  • 9