I am using videojs and wanna add captions from a URL. But player does not do as expected. My code is as below.

HTML

  <video id="media-player" class="video-js vjs-default-skin">

  </video>

JavaScript code

let videoOption = {
        controls: true,
        autoplay: true,
        fluid: true,
        preload: 'auto',
        poster: 'http://remote-url/1.png',
        sources: [{
          src: 'http://remote-url/1.mp4',
          type: 'video/mp4'
        }]
      };

  let captionOption = {
    kind: 'captions',
    srclang: 'en',
    label: 'English',
    src: 'http://remote-url/1.vtt'
  };

  const player = videojs('media-player', videoOption);
  player.addRemoteTextTrack(captionOption);  // palyer does not load caption
  console.log(player.textTracks().length) // print out => 0
  console.log(player.remoteTextTracks().length) // print out =>  0

I am using videojs and wanna add captions from a URL. But player does not do as expected. My code is as below.

HTML

  <video id="media-player" class="video-js vjs-default-skin">

  </video>

JavaScript code

let videoOption = {
        controls: true,
        autoplay: true,
        fluid: true,
        preload: 'auto',
        poster: 'http://remote-url/1.png',
        sources: [{
          src: 'http://remote-url/1.mp4',
          type: 'video/mp4'
        }]
      };

  let captionOption = {
    kind: 'captions',
    srclang: 'en',
    label: 'English',
    src: 'http://remote-url/1.vtt'
  };

  const player = videojs('media-player', videoOption);
  player.addRemoteTextTrack(captionOption);  // palyer does not load caption
  console.log(player.textTracks().length) // print out => 0
  console.log(player.remoteTextTracks().length) // print out =>  0

• javascript
• video.js

3 Answers 3

After searching hours of internet. Finally found this useful answer. @Xi Xiao's print out ment is mistyping, it should be a number more than 0.

So after you add

player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks(); 
console.log(tracks.length); // print out greater than 0

Then you can turn on the caption button by

for (let i = 0; i < tracks.length; i++) { 
    const track = tracks[i];
    if(track.kind==='captions' && track.language === 'eng') {
        track.mode = 'showing';
    }
  }
}

All of these code are in the ready block.

It turns out that ready function is needed before any API call.

let player = videojs('media-player', videoOption);
player.ready(function () {
  player.addRemoteTextTrack(captionOption);
  console.log(player.textTracks().length) // print out => 0
  console.log(player.remoteTextTracks().length) // print out =>  0
});

I've built a HTML-5 "video-js"-based page that implements soft-subtitling (using VTT).

You may want to view-source on it, and see if any of that coding is useful to your effort. The page is here:

http://weasel.firmfriends.us/Soft-VTT-Cloud/