Bir HTML5 video öğesini dinamik olarak, sayfa

Question

'de gösterilmeden yaratın Dinamik olarak bir HTML5 video öğesi oluşturmak mümkün mü? Bu öğeye API'sinin document.getElementById veya Name gibi erişebilmesine izin veriyorum ancak web sayfasında görünmeyebilir.

div.hide() gibi bir şey veya bu yönde bir şey var mı?

Answer 1

Sen

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

video.src = 'urlToVideo.ogg'; 
video.autoplay = true; 

ayrıca tarayıcı kaynak yöntemi maybe veya perhaps döndüren

if (video.canPlayType('video/ogg').length > 0) { 
    /* set some video source */ 
} 

ayarlamadan önce kullanmak istediğiniz video biçimini destekleyip desteklemediğini kontrol etmek canPlayType yöntemi kullanabilirsiniz deneyebilirsiniz tarayıcıya bağlı. Boş dize ise, oynayamayacağı anlamına gelir. API'yi kullanarak video kullanabilirsiniz Sadece dünya çapında sakla. Daha sonra bunu DOM'a ekleyebilirsiniz. Bu yardımcı olur umarım.

Answer 2

Sadece JS kullanarak her şeyi oluşturabildiğinizden emin olun. Html gövdesinde önceden oluşturulacak bir şeye ihtiyacınız yok.

var videlem = document.createElement("video"); 
/// ... some setup like poster image, size, position etc. goes here... 
/// now, add sources: 
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4"; 
sourceMP4.src = "path-to-video-file.mp4"; 
videlem.appendChild(sourceMP4); 
//// same approach add ogg/ogv and webm sources 

Bunu yapmadan önce tarayıcı video öğesini destekliyorsa, sen kontrol etmelisiniz ve eğer öyleyse, dosya formatları çalınabilir:

İşte JS video öğesini yaratmanın basit bir yoludur. video öğesi destekleniyorsa

var supportsVideoElement = !!document.createElement('video').canPlayType; 

Ardından test hangi video formatlarını çalınabilir: Bu tarafından yapabilirsiniz

var temp = document.createElement('video'); 
var canPlay_MP4 = temp.canPlayType('video/mp4; codecs="avc1.42E01E,mp4a.40.2"'); 
var canPlay_OGV = temp.canPlayType('video/ogg; codecs="theora,vorbis"'); 
var canPlay_WEMB = temp.canPlayType('video/webm; codecs="vp8,vorbis"'); 

Bunlardan sonra, JS kullanarak sayfanıza video öğesini ekleyebilir sadece uygun video kaynakları ayarlanmış. Eğer satırları eklemeniz gerekir sunucu tarafında .htaccess ile bir sorun olabilir: Bu gerekli olmayabilir

AddType video/ogg .ogv 
AddType video/ogg .ogg 
AddType video/mp4 .mp4 
AddType video/webm .webm 

, sunucu set şekline bağlı olarak, ancak sunucudan videoları oynatma sorunu karşılaşırsanız ama onlar örneğin iyi oynarlar. dev makinenizdeki localhost, bu sorunu çözebilir. Yukarıdaki satırlarda .htaccess, sunucu tarafında video dosyalarının bulunduğu klasöre yerleştirilmelidir.

Tamam şimdi, getElementById (...) mevcuttur, bu eleman olması için, sadece bunu oluştururken, bunun kimliği ayarlamanız gerekir:

var videlem = document.createElement("video"); 
videlem.id = "xxxxxx"; 

Ve şimdi daha sonra bulabilirsiniz kullanarak: birisi zaten yorumladı olarak

var videlem = document.getElementById("xxxxxx"); 

Ancak, sadece doğrudan kullanmak ... zaten elemanı oluşturduktan ve buna değişken işaret var varsa bunu yapmak gerekmez.

Umut bu

Answer 3

Güncelleme :-) yardımcı olur (ve en basit) yolu elde etmek için bu (Google aramaları burada lider beri):

Eğer eleman oluşturduysanız

var x = document.createElement("VIDEO"); 

if (x.canPlayType("video/mp4")) { 
    x.setAttribute("src","movie.mp4"); 
} else { 
    x.setAttribute("src","movie.ogg"); 
} 

x.setAttribute("width", "320"); 
x.setAttribute("height", "240"); 
x.setAttribute("controls", "controls"); 
document.body.appendChild(x);