我可以在使用JS创建的HTML5视频元素上指定多个源元素吗？

Question

我创建的

This fiddle显示了两个HTML5 video元素，这两个元素都是通过不同的方式创建的，但两者在功能方面都是相同的（两者都有控件，当它们准备就绪时自动播放，当他们结束时玩，并且最初是静音的）。

第一个是使用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"'/>
</video>

我知道我可以为使用HTML创建的video元素添加其他来源。例如，这个视频元素有两个源，第一个带有OGV文件，第二个带有MP4文件：

<video controls autoplay loop muted>
    <source src=".../foo.ogv" type="video/ogg"/>
    <source src=".../foo.mp4" type="video/mp4"/>
</video>

我可以这样做，但使用JS创建HTML5视频元素吗？

Answer 1

是的，可以做到。

我可以使用createElement()方法创建我想要的source元素，然后使用video方法将它们附加到appendChild()元素。

所以，我将修改我发布的original fiddle中的JS代码，用JS创建一个video元素，其特点是：

• 两个来源：
  • OGG文件来源
  • MP4文件来源
• 原始小提琴中两个视频定义的所有功能：
  • 控制
  • 准备就绪时自动播放
  • 结束播放
  • 最初静音

实际上，一个类似于我的video元素的元素有两个来源，用HTML创建并在问题中定义：

<video controls autoplay loop muted>
    <source src=".../foo.ogv" type="video/ogg"/>
    <source src=".../foo.mp4" type="video/mp4"/>
</video>

修改视频元素

我继续修改创建的video元素，丢弃src属性，但保留我定义的所有其他属性：

/* Video element creation */
this.video = document.createElement("video");

/* Video element properties settings */ 
this.video.controls = true;
this.video.autoplay = true;
this.video.loop = true;
this.video.muted = true; 

创建源元素并将它们附加到视频元素

要添加源代码，我使用source方法创建createElement()元素，稍后我设置source将拥有的属性，最后我使用方法appendChild()追加源元素到video元素。在这里，我为OGV文件创建了源元素。

/* First source element creation */
this.source1 = document.createElement("source");

/* Attribute settings for my first source */
this.source1.setAttribute("src", ".../foo.ogv");
this.source1.setAttribute("type", "video/ogg");

/* Append the first source element to the video element */
this.video.appendChild(this.source1);

我可以添加多个源，因此对于这个问题，因为我想添加两个源，一个OGV文件和一个MP4文件，我将添加两个。我继续为第二个元素创建source元素。

/* Second source element creation */
this.source2 = document.createElement("source");

/* Attribute settings for my second source */
this.source2.setAttribute("src", ".../foo.mp4");
this.source2.setAttribute("type", "video/mp4");

/* Append the second source element to the video element */
this.video.appendChild(this.source2);

将视频元素附加到正文

当我完成将源元素添加到我的video元素时，唯一要做的就是将视频元素附加到带有appendChild()的HTML正文：

document.body.appendChild(this.video);

最终代码

对于回答代码，我将首先放置video元素，其中包含两个源，使用HTML创建并在问题中定义，以进行比较。我添加了<hr>休息时间，仅仅是出于审美原因。

HTML（正文）

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

<hr/>

<!-- 
    As the video element created with JS is appended to the body, 
    it will be located here, at the end of that body.
 -->

的JavaScript

function Main() {
    this.video = document.createElement("video");
    this.video.controls = true;
    this.video.autoplay = true;
    this.video.loop = true;
    this.video.muted = true;

    this.source1 = document.createElement("source");
    this.source1.setAttribute("src", 
                              "http://techslides.com/demos/sample-videos/small.ogv");
    this.source1.setAttribute("type", "video/ogg");
    this.video.appendChild(this.source1);

    this.source2 = document.createElement("source");
    this.source2.setAttribute("src", 
                              "http://techslides.com/demos/sample-videos/small.mp4");
    this.source2.setAttribute("type", "video/mp4");
    this.video.appendChild(this.source2);

    document.body.appendChild(this.video);
}

var main = new Main();

小提琴

在this new fiddle中，您可以看到所有代码。