修改html视频,javascript – 更改html5视频标签上的源

我试图建立一个视频播放器，无处不在。到目前为止我会与：

(如在几个网站上看到的，例如video for everybody)

到现在为止还挺好。

但现在我也想要一些播放列表/菜单以及视频播放器，从中我可以选择其他视频。那些应该在我的播放器马上打开。所以我必须“动态更改视频的源”(如dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ – “让我们来看另一部电影”部分)与javascript。让我们暂时忘记flashplayer(因此IE)部分，我会尽量处理后面的。

所以我的JS改变< source>标签应该是这样的：

function loadAnotherVideo() {

var video = document.getElementsByTagName('video')[0];

var sources = video.getElementsByTagName('source');

sources[0].src = 'video2.mp4';

sources[1].src = 'video2.ogv';

video.load();

}

问题是，这不工作在所有浏览器。即firefox = 0

有一个漂亮的页面，在那里你可以观察到我有的问题：http://www.w3.org/2010/05/video/mediaevents.html

一旦我触发load()方法(在firefox，介意你)，视频播放器死亡。

现在我已经发现，当我不使用多个< source>标签，而只是在< video>标签中只有一个src属性。标签，整个事情在火狐工作。

所以我的计划是只使用src属性，并使用canPlayType()函数确定适当的文件。

我做错了不知何故或复杂的事情？