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
Share
Improve this question
asked Jun 13, 2017 at 7:24
Xi XiaoXi Xiao
9731 gold badge12 silver badges30 bronze badges
3 Answers
Reset to default 4After 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/