Agregar fuentes a video HTML5 en javascript?

Question

Estoy ejecutando el siguiente código para video html5.

var media; 
function videotr(){ 
    media = document.createElement('video'); 
    media.preload = true; 
    media.id = 'it'; 
    document.getElementById('crop').appendChild(media) 
    return media; 
}     
var div = document.getElementById('crop'); 
$(div).empty(); 
this.image = new videotr(); 
this.image.src = args.src; 

Sin embargo, me gustaría implementar varias fuentes para la compatibilidad. ¿Cómo se puede agregar en múltiples fuentes a través del script java? Quiero hacer esto de la manera correcta, no a través de innerHtml.

Answer 1

Crear un nuevo elemento source y añadirlo al elemento video:

function addSourceToVideo(element, src, type) { 
    var source = document.createElement('source'); 

    source.src = src; 
    source.type = type; 

    element.appendChild(source); 
} 

var video = document.createElement('video'); 

document.body.appendChild(video); 

addSourceToVideo(video, 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv', 'video/ogg'); 

video.play(); 

Aquí hay una fiddle por ello.