HTML5 视频 - 更改多个来源

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 加载新源，您可以简单地查询 vd1 的 currentSrc 属性，确定正在播放哪些视频并以该格式加载新视频。那时我只需删除所有source 元素并将video.src 设置为新值。