I want to get current subtitles\' text during playing a video (and than implement own subtitles block (i.e. to hide original) and also use the information in a few different
Solution:
videojs("example_video_1").ready(function() {
myvideo = this;
var aTextTrack = this.textTracks()[0];
aTextTrack.on('loaded', function() {
console.log('here it is');
cues = aTextTrack.cues(); //subtitles content is here
console.log('Ready State', aTextTrack.readyState())
console.log('Cues', cues);
});
//this method call triggers the subtitles to be loaded and loaded trigger
aTextTrack.show();
});
Result:
PS. Code found here.
var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks;
var textTrack = textTracks[0];
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode
Try this one
This code gets the current cue and put into the <span>
element
(function(){
var video = document.querySelector('video');
var span = document.querySelector('span');
if (!video.textTracks) return;
var track = video.textTracks[0];
track.mode = 'hidden';
track.oncuechange = function(e) {
var cue = this.activeCues[0];
if (cue) {
span.innerHTML = '';
span.appendChild(cue.getCueAsHTML());
}
};
})()
Here is the tutorial :Getting Started With the Track Element
Use the HTML5 Video API to get the current source, the split the src using /
and .
to get the name.
Media API
The above link has all the available API in the HTML5 video player. Your plugin uses HTML5 video player!
Yes, you can add a cuechange event listener when your video loads. This can get you the current track's caption text. Here is my working example using videojs.