动态更改字幕视频 - HTML5

Question

我正在尝试使用以下代码行动态更改字幕轨道.但它不会更改字幕.为什么？

$('#turnoff').click(function(){
  $('.player-content-video track').attr('default',false);
});

$('#english').click(function(){
  $('.player-content-video track').attr('default',false);
   $('.player-content-video track').eq(0).attr('default',false);
});

$('#chinese').click(function(){
   $('.player-content-video track').eq(1).attr('default',false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video class="player-content-video">
  <track src="sample_video-en.vtt" srclang="en" kind="subtitles" default="true">
  <track src="sample_video-ch.vtt" default="false" srclang="ch" kind="subtitles">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<br/>
<button id="turnoff" >NO SUBTITLE</button>
<button id="english" >ENGLISH</button>
<button id="chinese" >CHINESE</button>

注:在track src本例中为唯一代码演示.

Answer 1

如果您需要更改标签default上的属性，track可以使用以下脚本：

工作示例，请检查 DOM 以查看结果（因为视频和轨道 src 不存在）：

https://jsfiddle.net/3hh9kvgd/

您可以:eq() Selector通过以下方式使用 jQuery。 更多信息可以在这里找到。

$('.player-content-video track:eq(0)')

顺便说一句，使用:eq()使您的代码依赖于您<track>在 DOM 中的位置，并且当用户单击按钮时需要横向所有 DOM，这在可维护性和性能方面并不是很好的方法。

相反，您可以<track>在使用 jQuery 时通过 id 引用并缓存您的 DOM 选择。

    $('#turnoff').click(function(){
       $('.player-content-video track').attr('default',false);
    });

    $('#english').click(function(){
       $('.player-content-video track').attr('default',false);
       $('.player-content-video track:eq(0)').attr('default',true);
    });

    $('#chinese').click(function(){
       $('.player-content-video track').attr('default',false);
       $('.player-content-video track:eq(1)').attr('default',true);
    });

<video class="player-content-video">
  <track src="sample_video-en.vtt" srclang="en" kind="subtitles" default="true">
  <track src="sample_video-ch.vtt" default="false" srclang="ch" kind="subtitles">
  <source src="myvideo.mp4" type="video/mp4">
</video>
<br/>
<button id="turnoff" >NO SUBTITLE</button>
<button id="english" >ENGLISH</button>
<button id="chinese" >CHINESE</button>