帶有多個源文件和多個文本軌道的html5視頻

我有一個視頻元素，用戶可以從選項列表中選擇他們想播放的視頻。對於每個視頻，我都有一個與之關聯的文本軌道。我可以輕鬆播放新選擇的視頻。但我似乎無法設置新的文本軌道。帶有多個源文件和多個文本軌道的html5視頻

在HTML我有：

<video id="theVideo" controls="" width="569" height="288"> 
    <track id="theTrack" kind="subtitles" type="text/webvtt" srclang="en" /> 
</video>

我已經嘗試添加這樣的源：

$('#theTrack').attr('src', newSource.vtt);

這只是建立了不同的字幕，讓我最終有很多不同的字幕以前的視頻同時顯示。

我也嘗試刪除所有軌道，並重新加入它。除非我隱藏字幕，然後選擇一個新的視頻播放，否則這將起作用。整個頁面在玩了一段時間後崩潰......我認爲它仍然試圖顯示舊的跟蹤文本？

$('#theTrack').remove(); 
$('#theVideo').append("<track id='theTrack' kind='subtitles' type='text/webvtt' srclang='en'/>"); 
$('#theTrack').attr('src', newSource.vtt);

任何幫助，將不勝感激!! 謝謝

來源

2013-03-05 user2134154

你可以從DOM移除整個視頻元素和重建，包括新的.vtt源碼？ – Offbeatmammal 2013-03-09 05:07:42

還可以預先定義原始視頻源上的所有文本軌道，並在更改視頻源時根據需要進行交換？或（更難的工作）閱讀文本軌道，並手動插入提示 – Offbeatmammal 2013-03-09 18:24:14

好吧...所以它不漂亮，但它似乎你需要去的方式是從視頻中刪除所有當前活動的線索（由於某種原因，它似乎只能以相反的順序），然後交換來源。

此示例在Chrome中可以正常工作，我確實在Safari中看到過一次崩潰，IE9很脆弱，但我不確定您的目標平臺是什麼。看起來它真的需要一些細化的在這一領域，但希望這將讓你更接近，你必須......

<!DOCTYPE html> 
<html> 
<head> 
<title>Toggle Caption Source</title> 
</head> 
<body> 
<video autoplay controls muted id="video"> 
    <source src="Video.mp4" type="video/mp4"> 
    <track id="t" src="botrack.vtt" label="English" kind="subtitles" srclang="en" default> 
    HTML5 video not supported 
</video> 

<p onclick="o();">toggle</p> 
<script> 
function o() { 
    var v = document.getElementById("video") 
    var t = document.getElementById("t") 

    var textTracks = v.textTracks; // one for each track element 
    var textTrack = textTracks[0]; // corresponds to the first track element 

    var cues = textTrack.cues; 
    for (var i=cues.length;i>=0;i--) { 
     textTrack.removeCue(cues[i]); 
    } 
    if (t.src == "http://{qualified.url}/botrack.vtt") { 
     t.src = "http://{qualified.url}/entrack.vtt" 
    } else { 
     t.src = "http://{qualified.url}/botrack.vtt" 
    } 
} 
</script> 

</body> 
</html>

來源

2013-03-09 20:14:19 Offbeatmammal

帶有多個源文件和多個文本軌道的html5視頻

回答

相關問題