JavaScriptを使ってHTML5ビデオにソースを追加するには？

Question

私は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; 

しかし、互換性のために複数のソースを実装したいと思います。 Javaスクリプトを使用して複数のソースを追加するにはどうすればよいですか？ 私はこれを正しい方法で行いたいのですが、innerHtmlではありません。

Answer 1

新しいsource要素を作成し、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(); 

はここにそれのためにfiddleです。