具有多个源文件和多个文本轨道的html5视频 [英] html5 video with multiple source files and multiple text tracks
问题描述
我有一个video元素，用户可以从选项列表中选择他们想要播放的视频.对于每个视频，我都有一个与之关联的文本轨道.我可以轻松播放新选择的视频.但是我似乎无法设置新的文本轨道.
I have a video element and the user can select which video they would like to play from a list of options. For each video I have one text track that is associated with it. I can play the newly selected video easily. But I can't seem to be able to set the new text track.
在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);
这只是建立了不同的字幕，所以我最终得到了与同时显示的先前视频不同的字幕.
This just builds up the different subtitles so I end up with lots of different subtitles from the previous videos being displayed at the same time.
我也尝试过将曲目全部删除，然后重新添加.除非我隐藏字幕，然后选择要播放的新视频，否则此方法有效.播放了片刻后，整个页面崩溃了……我认为它仍在尝试显示旧的曲目文本?
I have also tried removing the track all together and adding it back on. This works except if I hide the captions and then select a new video to play. The whole page crashes after a short while of playing...I think it's still trying to display the old track text??
$('#theTrack').remove();
$('#theVideo').append("<track id='theTrack' kind='subtitles' type='text/webvtt' srclang='en'/>");
$('#theTrack').attr('src', newSource.vtt);
任何对此的帮助将不胜感激！！ 谢谢
Any help on this would be greatly appreciated!! Thanks
推荐答案
好的...看起来并不漂亮，但是看来您需要采取的方法是从视频中删除所有当前有效的提示(并且出于某种原因)似乎只能以相反的顺序工作)，然后交换源.
okay... so it's not pretty but it seems the way you need to go is to remove all the currently active cues from the video (and for some reason it seems to only work in reverse order) and then swap the source.
此示例在Chrome中可以正常运行，我的确在Safari中遇到了一次崩溃，并且IE9不稳定，但是我不确定您的目标平台是什么.看起来它确实需要在这方面进行一些改进，但是希望这可以使您更接近需要的地方.
this sample works okay in Chrome, I did see one crash in Safari and IE9 was flaky but I'm not sure what your target platform(s) are. Looks like it really needs a bit of refinement in this area, but hopefully this will get you closer to where you need to be...
<!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视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
