在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。