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?