HTML5视频 - 更改多个来源 [英] HTML5 Video - Change multiple sources

问题描述

我在Google上发现了几个关于这个问题的网站，并且在这里发现了几个问题，这些问题显然已得到解答，但是由于我在最近一两个星期内一直在研究这个问题，而且似乎无法让它可以工作，我想重温这个。

I have found several sites on Google about this problem and also found a few questions on here, which were apparently answered, but as I've been working on this for the last one or two weeks and just can't seem to get it to work at all, I wanted to revisit this.

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

I'm working on a demo that uses several video tags (vd1-3) which are then used in several canvas tags (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上的回答问题中所建议的那样），但是我无法完成这项工作。

I got a working version that uses one video. Now I would like to be able to dynamically change the clips that are playing in my video tags and subsequently in the canvas tags. Changing only one source worked, as far as I remember that was just "vd1.src = '...'", but I want to have at least two video files in there. Now as you can see here, I tried using id's for the sources (as was suggested in an answered question here on stackoverflow), but I wasn't able to make that work.

我们可以在这里获得所有的代码：

We were able to get all the sources with this little bit of code here:

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，但我无法获得任何东西。

But I also failed to use it in order to change my sources. I thought I might be able to use "items[i].src = ..." or use setAttribute, but I can't get anything to work.

I对于这一切还是比较新鲜的，所以我可能错过了一些非常简单的东西......所以如果任何人有一个想法，并可以指向我的方向，我会非常感激。

I'm still fairly new to all this, so I'm possibly missing something very simple... so if anyone has an idea and could point me into a direction, I would really appreciate it.

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

Update: Eventually we came up with this solution which is pretty simple and straightforward

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

推荐答案

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

I think you're overcomplicating things - there's no need to update multiple sources as any given browser is only ever going to be playing one of your videos. If you're loading new sources with JavaScript you can simply query the currentSrc property of vd1, determine which of the videos is playing and load the new video in that format. At that point I'd simply remove all the source elements and set video.src to the new value.

这篇关于HTML5视频 - 更改多个来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！