Thêm nguồn vào video HTML5 trong javascript?

Question

Tôi đang chạy đoạn mã sau cho 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; 

Tuy nhiên, tôi muốn triển khai nhiều nguồn để tương thích. Làm cách nào để thêm nhiều nguồn thông qua tập lệnh java? Tôi muốn làm điều này đúng cách, không phải thông qua innerHtml.

Answer 1

Tạo một yếu tố mới source và thêm nó vào các yếu tố 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(); 

Dưới đây là một fiddle cho nó.