VideoJS：无法在运行时切换文本轨道答案

【问题标题】：VideoJS: unable to switch the text track on run timeVideoJS：无法在运行时切换文本轨道
【发布时间】：2020-02-06 09:31:39
【问题描述】：

在 videojs 中，我想从下拉列表中更改文本轨道。当我选择一个选项（比如中文）时，字幕会自动更改。以下是我的代码：

<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>

我阅读了Dynamically change videojs captions with addTextTrack() 的帖子，但是无法理解。我也经历了https://docs.videojs.com/tutorial-text-tracks.html，但不明白如何实现这一点。

应该是这样的：http://dev3.indusnettechnologies.com/bamboo-tv/

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

  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>

【讨论】：