Cuando intento agregar pistas de texto de video al reproductor de videoJs, las agrega en el orden incorrecto donde aparece la nueva pista sobre la pista anterior.
Creé un jsFiddle para mostrar esto, ¿alguien puede ayudar a resolver cómo soluciono esto?
https://jsfiddle.net/ts9qogdh/3/
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{ }' muted> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'> </video> var currPlayer = videojs("my_video_1") currPlayer.play() currPlayer.addTextTrack("captions", 'english', 'en'); window.setInterval(() => { let currentTime = currPlayer.currentTime(); const activeCue = new VTTCue(currentTime, currentTime + 2, currentTime + 2) var tracks = currPlayer.textTracks(); let existing = tracks.tracks_.find(x => x.kind === 'captions' && x.language === 'en'); existing.mode = 'showing'; existing.addCue(activeCue); }, 1000)Este CSS debería funcionar. Aunque, en IE11 los subtítulos están un poco espaciados...
.vjs-text-track-display > div { display: flex; flex-direction: column; justify-content: end; } .vjs-text-track-cue { position: initial !important; }