javascript - 我可以在用 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代码我已经发布，创建一个video带有 JS 的元素，将具有以下特点:

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

本质上，一个类似于我的 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 时元素，唯一剩下要做的就是使用 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();

fiddle

在this new fiddle你可以看到所有的代码在运行。