更改 html5 视频标签的源

我正在尝试构建一个可以在任何地方使用的视频播放器。到目前为止我会选择：

<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>

（如在几个网站上看到的，例如视频给大家 http://camendesign.com/code/video_for_everybody） 到目前为止，一切都很好。

但现在我还想要某种播放列表/菜单以及视频播放器，我可以从中选择其他视频。这些应该立即在我的播放器中打开。所以我必须“动态更改视频源”（如上所示dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/- 使用 Javascript 的“让我们看另一部电影”部分。让我们暂时忘记 Flash 播放器（以及 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 中有一个很好的页面，您可以在其中观察我遇到的问题：http://www.w3.org/2010/05/video/mediaevents.html http://www.w3.org/2010/05/video/mediaevents.html

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

现在我发现当我不使用多个<source>标签，但只有一个src内的属性<video>标签，整个事情does在 Firefox 中工作。

所以我的计划就是使用它src属性并使用确定适当的文件canPlayType() http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-navigator-canplaytype功能。

我是不是做错了什么或者让事情变得复杂了？

我讨厌所有这些答案，因为它们太短或依赖于其他框架。

这是执行此操作的“一种”vanilla JS 方法，在 Chrome 中工作，请在其他浏览器中测试：

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();
console.log({
  src: source.getAttribute('src'),
  type: source.getAttribute('type'),
});

setTimeout(function() {
  video.pause();

  source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
  console.log({
    src: source.getAttribute('src'),
    type: source.getAttribute('type'),
  });
}, 3000);

<video id="video" width="320" height="240"></video>

外部链接 https://jsfiddle.net/mattdlockyer/5eCEu/2/