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

これが フィドル です。