我的页面包含这个 <video>
带有多个副标题的标签 <track>
秒。我想通过使用 jquery 单击相应的国旗来动态启用轨道:
<div id="lang">
<img src="mini/ita.png" class="it" alt="Italiano" title="Italiano" />
<img src="mini/eng.png" class="en" alt="English" title="English" />
</div>
<video controls="controls" >
<source src="webcast.webm" />
<source src="webcast.mp4" />
<source src="webcast.ogv" />
<track kind="subtitles" src="./sub-en.vtt" srclang="en" />
<track kind="subtitles" src="./sub-it.vtt" srclang="it" />
</video>
<script>
$('#lang img').click(function(){
language=$(this).attr('class');
$('video track').removeAttr('default');
$('video track[srclang='+language+']').attr('default','default');
});
</script>
“默认”属性已正确插入,但没有显示字幕。手动插入默认属性效果很好(在 chrome 和 opera 上)。
最佳答案
<script>
$('#lang img').click(function(){
var language=$(this).attr('class');
$($('video').prop('textTracks')).prop('mode', function(){
return this.language == language ? 'showing' : 'disabled';
});
});
</script>
关于javascript - 如何更改 html5 视频元素的默认轨道?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13494971/