0

我有一个视频元素，用户可以从选项列表中选择他们想要播放的视频。对于每个视频，我都有一个与之关联的文本轨道。我可以轻松播放新选择的视频。但我似乎无法设置新的文本轨道。

在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);

对此的任何帮助将不胜感激！谢谢

4

1 回答 1

0

好吧......所以它并不漂亮，但似乎您需要采取的方法是从视频中删除所有当前活动的提示（由于某种原因，它似乎只能以相反的顺序工作），然后交换源。

此示例在 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-09T20:14:19.360 回答