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

这是执行此操作的“一种”香草 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>

外部链接

Modernizr对我来说就像一种魅力。

我所做的是我没有使用<source>. 不知何故，这把事情搞砸了，因为视频只在第一次调用 load() 时工作​​。相反，我使用了 video 标签中的 source 属性 -><video src="blabla.webm" />并使用Modernizr来确定浏览器支持的格式。

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

希望这会帮助你:)

如果您不想使用Modernizr，您可以随时使用CanPlayType()。

你最初的计划对我来说听起来不错。您可能会发现更多处理动态管理<source>元素的浏览器怪癖，如 W3 规范说明所示：

当元素已经插入到视频或音频元素中时，动态修改源元素及其属性将不起作用。要更改正在播放的内容，只需直接使用媒体元素上的 src 属性，可能会使用 canPlayType() 方法从可用资源中进行选择。通常，在解析文档后手动操作源元素是一种不必要的复杂方法。

http://dev.w3.org/html5/spec/Overview.html#the-source-element

我用这个简单的方法解决了这个问题

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

与其让相同的视频播放器加载新文件，不如擦除整个<video>元素并重新创建它。如果 src 正确，大多数浏览器会自动加载它。

示例（使用Prototype）：

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);