我创建的这个小提琴video显示了两个 HTML5元素，两者都是通过不同的方式创建的，但两者在功能方面是相同的（两者都有控件，准备好时自动播放，结束时播放，并且最初是静音的）。

第一个是使用 HTML 创建的，第二个是使用 JS 创建的。

使用 HTML 创建的 HTML5 视频元素

<video controls autoplay loop muted>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>

使用 JS 创建的 HTML5 视频元素

function Main() {
    this.video = document.createElement("video");
    this.video.src = "http://techslides.com/demos/sample-videos/small.mp4";
    this.video.controls = true; 
    this.video.autoplay = true; 
    this.video.loop = true;
    this.video.muted = true
    document.body.appendChild(this.video); /* Append to the body */
}

var main = new Main(); 

我的问题涉及以下内容：我正在查看HTML5 Rocks中的这段代码，用作如何在视频元素上指定多个源文件的示例（因此，例如，浏览器将播放视频文件，具体取决于关于支持的格式）。在这种特殊情况下，source指定了两个元素。

<video controls>
    <source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/>
    <source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/> …