[英]Change subtitle dynamically video - HTML5
我正在嘗試使用以下代碼行動態更改字幕軌道。但它不會更改字幕。為什么?
$('#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
僅用於代碼演示。
如果您需要更改track
標記的default
屬性,可以使用以下腳本:
工作示例,請檢查DOM以查看結果(因為視頻和軌道src不存在):
https://jsfiddle.net/3hh9kvgd/
您可以通過以下方式使用jQuery :eq() Selector
。 更多信息可以在這里找到。
$('.player-content-video track:eq(0)')
順便使用:eq()
使你的代碼依賴於你在DOM中的<track>
位置,並且當用戶點擊按鈕時需要橫向所有DOM,這在術語可維護性和性能方面不是很好的方法。
您可以使用id引用<track>
,並在使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.