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.