如何正確使用javascript將<video>標記插入到html中？

我剛剛從這裏開始使用JavaScript，並已做到這一點。如何正確使用javascript將<video>標記插入到html中？

我已經作出了codepen，顯示我有

1）有被加載，當我刪除視頻標籤的一個兩個副本視頻它可以防止隨機化按鈕從工作或任何視頻的兩個問題從裝載起。我只是試圖讓一個視頻加載進去。

2）在codepen中，我有一個按鈕可以隨機點擊，但是我試圖用視頻標記視頻，以便點擊視頻以啓動隨機化。每當我試圖做到這一點，我得到一個未定義的錯誤或視頻將不會加載=/

播放視頻

<div class="video-label"></div> <!-- loads in top video (only want one video) --> 

<video loop autoplay> <!-- loads in bottom video (only want one video) --> 
    Your browser does not support the <code>video</code> element. 
</video>

如果你點擊codepen你會希望能夠看到兩個視頻，其中正在加載和點擊標籤的位置。任何幫助是極大的讚賞！！我一直在試圖弄明白整個晚上：/

這裏是codepen

Codepen

提前感謝！

來源

2015-01-15 Brian Quach

codepen code在哪裏？這是說「在這裏輸入代碼」 – 118218

現在已經到了！我的壞哈哈，謝謝你讓我知道:)太強調這個我不能直接思考 –

爲什麼你張貼同樣的東西兩次？ http://stackoverflow.com/questions/27957349/how-to-load-object-inside-of-an-a-tag < - 這將是一個大的Downvote –

在這一行，你在網頁上找到任何video標籤和嘗試複製它的內容到div：

var $video = $('video'); 
... 
$('.video-label').html($video.get(0).outerHTML);

但是，如果你刪除的頁面video會有什麼複製。您首先需要movevideo標籤div。或者在用戶點擊鏈接時動態創建，而不是通過複製。

來源

2015-01-15 07:09:18 Freywar

您可以通過以下這個邏輯使用JavaScript創建一個HTML5視頻標籤：

var videoelement = document.createElement("video"); 
videoelement.setAttribute("id", "video1"); 

var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4"; 
sourceMP4.src = "http://zippy.gfycat.com/SpottedDefensiveAbalone.mp4"; 
videoelement.appendChild(sourceMP4); 

var sourceWEBM = document.createElement("source"); 
sourceWEBM.type = "video/webm"; 
sourceWEBM.src = "http://zippy.gfycat.com/MinorGregariousGrub.webm"; 
videoelement.appendChild(sourceWEBM); 

$('.video-label').html(videoelement); 
var video = document.getElementById("video1"); 
video.play();

此代碼創建一個視頻標記，包括到您的div（。視頻標籤），則視頻會自動啓動。這是沒有隨機的東西（每次使用相同的網址），所以你可以在方便的時候更新它。嘗試刪除該視頻在你的HTML文件，現在的工作：

<video loop autoplay> 
     Your browser does not support the <code>video</code> element. 
</video>

這裏是一個鏈接，你可以下載你的代碼更新，工作液（無隨機化）：

http://tests.krown.ch/Codepen.zip

而且當你點擊你的視頻div（.video-label），視頻標籤將被刪除並創建回（但具有相同的網址，你只需要更新視頻網址與你隨機的東西）

來源

2015-01-15 07:14:38 118218

如何正確使用javascript將<video>標記插入到html中？

回答

相關問題