在HTML 5视频标签上更改源

Question

在HTML 5视频标签上更改源

我在试着制作一个视频播放器，它在任何地方都能工作。到目前为止我要去的是：

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object></video>

(如在几个站点上看到的那样)每个人的视频到目前为止，还不错。

但是现在我也想要一些播放列表/菜单以及视频播放器，我可以从中选择其他视频。这些应该马上在我的球员内打开。因此，我将不得不“动态地更改视频的来源”(如dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/-带有javascript的“让我们看另一部电影”部分。让我们暂时忘记闪存器(因此IE)部分，我将尝试在以后处理这个问题。

所以我的JS改变了<source>标记应该类似于：

<script>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();}</script>

问题是，这并不是所有浏览器都能使用的。也就是说，Firefox=O有一个很好的页面，您可以观察到我遇到的问题：http：/www.w3.org/2010/05/视频/mediavents.html

一旦我触发load()方法(在Firefox中，请注意)，视频播放器就会死掉。

现在我发现当我不使用多重<source>标记中的一个src属性。<video>标记，整个程序在Firefox中都是有效的。

因此，我的计划是只使用src属性并使用canPlayType()功能。

我是做错了还是让事情复杂化了？