動態更改字幕視頻 - 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>

注：在這個例子中tracksrc僅供代碼演示。

Answer 1

如果您需要更改您的track標籤，你可以使用下面的腳本default屬性：

工作示例，請檢查DOM看到的結果（如視頻和跟蹤SRC不存在）：

https://jsfiddle.net/3hh9kvgd/

您可以通過以下方式使用jQuery :eq() Selector。 More info can be found here.

$('.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>