0

In videojs, I want to change the text track from the drop down. When I select an option (say, Chinese), the subtitle will automatically be changed. Below is my code:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<style>
.video-js .vjs-control-bar {
  display: none;
}
</style>

<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264"  poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />

  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
  </video>

  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>

  <p><select name="sel" id="sel"><option value="en">English</option><option value="zh">Chinese</option></select></p>
</body>

I read the post Dynamically change videojs captions with addTextTrack() however, unable to understand. I also gone through https://docs.videojs.com/tutorial-text-tracks.html but failed to understand how to achieve this.

This is should be as like: http://dev3.indusnettechnologies.com/bamboo-tv/

Niladri Banerjee - Uttarpara
  • 2,219
  • 8
  • 52
  • 92

1 Answers1

4

  var player = videojs('dotsub_example');
  var tracks = player.textTracks();
  var trackSelector = document.getElementById("sel");

  trackSelector.addEventListener("change", function () {
      var selectedLanguage = this.value;

      for (var i = 0; i < tracks.length; i++) {
          var track = tracks[i];

          track.mode = "disabled";
          if (track.kind === 'captions' && track.language === selectedLanguage) {
              track.mode = 'showing';
          }
      }
  });
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<style>
.video-js .vjs-control-bar {
  display: none;
}
</style>

<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264"  poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />

  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
  <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
  </video>

  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>

  <p>
    <select name="sel" id="sel">
      <option value="en">English</option>
      <option value="zh">Chinese</option>
      <option value="es">Spanish</option>
      <option value="fr">French</option>
    </select>
  </p>
</body>
DK Dhilip
  • 2,614
  • 1
  • 8
  • 17