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

Question

我创建的这个小提琴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"'/>
</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()。

因此，我将修改我发布的原始小提琴中的 JS 代码，以video使用 JS 创建一个元素，该元素将具有以下功能：

• 两个来源：
  • 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()，稍后设置源将具有的属性，最后使用该方法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元素后，唯一要做的就是使用以下命令将视频元素附加到 HTML 主体appendChild()：

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();

小提琴

在这个新的小提琴中，您可以看到所有正在运行的代码。