我尝试使用以下代码行在单击按钮时动态更改字幕轨道。但它没有更改字幕。为什么?
$('#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
仅用于代码演示。
最佳答案
如果您需要更改 default
您的 track
上的属性标记你可以使用以下脚本:
工作示例,请检查 DOM 以查看结果(因为视频和轨道 src 不存在):
https://jsfiddle.net/3hh9kvgd/
您可以使用 jQuery :eq() Selector
通过以下方式。
More info can be found here.
$('.player-content-video track:eq(0)')
顺便使用:eq()
让你的代码依赖于你的 <track>
在 DOM 中定位并要求在用户单击按钮时横向所有 DOM,这在可维护性和性能方面并不是真正好的方法。
您可以改为引用您的 <track>
通过 id 并在使用 jQuery 时缓存您的 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>
关于javascript - 动态更改字幕视频 - HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38344801/