Question

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

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

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

Answer 1

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

这个示例在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>

带有多个源文件和多个文本轨道的html5视频

1 个答案: