Can I specify multiple source elements on a HTML5 video element created with JS?

Question

This fiddle I have created, shows two HTML5 video elements, both created by different ways, but both are equal in terms of functionality (both have controls, autoplay when they're ready, play over when they end, and are initially muted).

The first one was created using HTML, and the second one was created using JS.

HTML5 video element created with HTML

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

HTML5 video element created with JS

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

My question is concerned to the following: I was looking at this piece of code from HTML5 Rocks, used as an example of how I can specify multiple source files on a video element (so, for example, a browser will play a video file depending on the supported formats). In this particular case, two source elements are specified.

<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>

I know I can add additional sources to a video element created with HTML. For example, this video element with two sources, the first one with a OGV file, and the second one with a MP4 file:

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

Can I do the same, but with an HTML5 video element created with JS?

Answer 1

Yes, it can be done.

I can use the createElement() method to create the source elements I want, and append them to the video element with the appendChild() method.

So, I will modify the JS code in the original fiddle I had posted, to create a video element with JS, that will feature:

• Two sources:
  • OGG file source
  • MP4 file source
• All the functionality defined on the two videos in the original fiddle:
  • Controls
  • Autoplay when it is ready
  • Play over on ending
  • Initially muted

Esentially, an element similar to my video element with two sources, created with HTML and defined in the question:

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

Modifying the video element

I proceed to modify the video element created, discarding the src property, but keeping all the rest of the properties I had defined:

/* 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; 

Creating the source elements and appending them to the video element

To add a source, I create a source element with the createElement() method, later I set the attributes that source will have, and finally I use the method appendChild() to append the source element to the video element. Here, I create the source element for the OGV file.

/* 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);

I can add more than one source, so for this question, as I wanted to add two sources, a OGV file and a MP4 file, I will add both. I proceed to create the source element for the second one.

/* 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);

Appending the video element to the body

As I finished to add the sources elements to my video element, the only thing left to do, is to append the video element to the HTML body with appendChild():

document.body.appendChild(this.video);

Final code

For the answering code, I will put first the video element with two sources, created with HTML and defined in the question, for comparison purposes. I added a <hr> break, just for aesthetic reasons.

HTML (Body)

<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

In this new fiddle you can see all the code in action.