How to add subtitles and audio tracks to video.js?

Question

I want to insert separate audio and text tracks so that users can calmly switch between them I already tried to insert subtitles

    <video
    id="player" class="video-js vjs-default-skin vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup='{}'>
    <source src="https://a61.stormo.tv/remote_control.php?file=B64YTo0OntzOjQ6InRpbWUiO2k6MTU1Mzk3ODMzNTtzOjU6ImxpbWl0IjtpOjA7czo0OiJmaWxlIjtzOjMyOiIvdmlkZW9zLzM5NzAwMC8zOTc1MDMvMzk3NTAzLm1wNCI7czoyOiJjdiI7czozMjoiM2RmNjE3NGI0OTVhNGQ2NTEwNWFhMDE2YzI5YTBiYjEiO30%3D" type="video/mp4"> 
    <track label="rus" kind="subtitles" srclang="ru" src="sub-ru.vtt"/>
    <track label="eng" kind="subtitles" srclang="en" src="sub-en.vtt"/>
    </video>

But the subtitles worked only in firefox.

I already tried to insert audio

<video
id="player" class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
data-setup='{}'>
<source src="https://a61.stormo.tv/remote_control.php?file=B64YTo0OntzOjQ6InRpbWUiO2k6MTU1Mzk3ODMzNTtzOjU6ImxpbWl0IjtpOjA7czo0OiJmaWxlIjtzOjMyOiIvdmlkZW9zLzM5NzAwMC8zOTc1MDMvMzk3NTAzLm1wNCI7czoyOiJjdiI7czozMjoiM2RmNjE3NGI0OTVhNGQ2NTEwNWFhMDE2YzI5YTBiYjEiO30%3D" type='video/mp4'>
<source id="my-spanish-audio-track" src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</video>

<script type="text/javascript">
$('document').ready(function(){  
 var player = videojs('player');
var track = new videojs.AudioTrack({
  id: 'my-spanish-audio-track',
  kind: 'translation',
  label: 'Spanish',
  language: 'es'
});
player.audioTracks().addTrack(track);       
});  
</script>

But it does not work.

Is there any way to insert audio and text tracks so that they work in all browsers?

How to add subtitles and audio tracks to video.js?

0 Answers0