動態創建HTML5視頻元素，但頁面中未顯示它

是否可以動態創建HTML5視頻元素，以便我可以通過API（如document.getElementById或Name）訪問元素，但它可能不會顯示在網頁中。動態創建HTML5視頻元素，但頁面中未顯示它

像div.hide()或東西在那個方向？

2013-10-08 Swaraj Chhatre

如果您所創建的元素，爲什麼你需要試圖從文檔中獲取對它的引用？保留創建時的參考資料。 – Quentin

當然。這是可能的。谷歌一點，你會找到答案。 –

使用css隱藏'display：none'或'visibility：hidden'或者使用jquery的'hide（）'方法。然後按照您的需求展示它。 –

您可以嘗試

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

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

，你也可以使用canPlayType方法來檢查瀏覽器是否支持您要設置源

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

該方法返回maybe或perhaps之前使用的視頻格式取決於瀏覽器。如果是空字符串，則表示無法播放。

您現在可以使用video使用API。只需將其存儲在全球。您可以稍後將其插入到DOM中。希望這可以幫助。

來源

2013-10-09 07:35:12

當我將文件拖放到網頁上時，我需要動態創建視頻元素並將其附加到特定的DIV。在示例代碼中，'urlToVideo.ogg'是服務器端相對url，據推測。我所擁有的全部是本地URL，來自文件。 –

use video.autoplay = true not autoPlay – yeahdixon

當然你可以使用JS創建所有東西。您不需要在html正文中預先創建任何內容。

這裏是JS創建視頻元素的簡單方法：

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

之前這樣做，你應該檢查一下瀏覽器支持視頻元素，如果是這樣，它的文件格式可以播放。這個你可以做的是：

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

然後，如果視頻元素支持，測試，視頻格式可以播放：

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"');

在此之後，你可以使用JS添加視頻元素到您的網頁只，並設置適當的視頻源。有可能是與服務器端的.htaccess，你需要添加行的問題：

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

這可能不需要，這取決於您服務器的設置，但是如果遇到問題，從您的服務器播放視頻，但他們從例如罰款。本地主機在你的開發機器上，這可以解決問題。 .htaccess與上面的行應放在視頻文件所在的文件夾中，在服務器端。

現在好了，纔能有可用的getElementById（...）這個元素，你只需要設置它的ID，當你創建：

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

現在你以後能找到它使用：

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

然而，正如有人已經評論，你不需要做這個，如果你已經創建了元素，並有變量指向...只是直接使用它。

希望這有助於:-)

來源

2013-12-16 13:03:27 Sinisa

我知道我們可以創建各種類型的元素，比如video/iframe，但是我認爲我們必須在同一個循環中刪除元素，以便它不會出現在DOM中。所以我們在創建一個元素之後，必須移除元素，它將顯示在DOM中。 –

爲什麼要創建一個臨時視頻對象並且不要在要用於DOM的videlem上調用canPlayType的任何特定原因？ – Micros

@Micros你所指的片段是，如果你只是想測試什麼格式可以播放，所以稍後當你創建視頻時，你不需要放置所有的源，只需要一個可以播放的源。它還可以幫助您確定是否支持視頻標籤，但由於某種原因，可用編解碼器無法播放。在我看來，測試只應該進行一次（例如在文檔加載時），而不是每次將視頻添加到文檔。 – Sinisa

更新（簡單的）的方式來實現這一點（因爲谷歌搜索在這裏領導）：

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

來源

2017-07-05 21:09:05 Sam

動態創建HTML5視頻元素，但頁面中未顯示它

回答

相關問題