Question

我在Google上找到了几个关于这个问题的网站，并且在这里也发现了一些问题，这些问题显然得到了解答，但是我在过去的一两周内一直在研究这个问题而且似乎无法让它工作，我想重温这一点。

我正在开发一个使用多个视频标签（vd1-3）的演示，然后在几个画布标签（cv1-3）中使用。

<video id="vd1" width="480" preload> 
    <source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
    <source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>

<canvas id="cv1" width="160" height="270"></canvas>

我有一个使用一个视频的工作版本。现在，我希望能够动态更改我的视频标签中播放的剪辑以及随后的画布标签。改变只有一个源工作，据我记得那只是“vd1.src ='...'”，但我希望至少有两个视频文件。现在你可以在这里看到，我尝试使用id作为源代码（正如在stackoverflow上的回答问题中所建议的那样），但是我无法做到这一点。

我们能够在这里获得所有来源的代码：

var x = document.getElementById("vd1");

var items = x.getElementsByTagName("source");

for(var i= 0; i < items.length; i++){
    alert(items[i].getAttribute('src'));
}
}, false);

但我也没有使用它来改变我的来源。我以为我可以使用“items [i] .src = ...”或使用setAttribute，但我无法使用任何东西。

我仍然对这一切都很陌生，所以我可能会错过一些非常简单的事情......所以，如果有人有想法并指出我的方向，我会非常感激。

更新最终我们提出了这个非常简单明了的解决方案

var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;

Answer 1

我认为你过于复杂 - 没有必要更新多个来源，因为任何给定的浏览器都只会播放你的一个视频。如果您使用JavaScript加载新来源，则只需查询currentSrc的{{1}}属性，确定正在播放哪些视频并以该格式加载新视频。此时，我只需删除所有vd1元素，并将source设置为新值。

HTML5视频 - 更改多个来源

1 个答案: