點擊按鈕時播放HTML5視頻

-1

在我的網站上，我有一段短片，內容是我在左上角的一個循環中播放，沒有任何控制，有點像來自紅矮星的霍莉。我想點擊一個按鈕並用另一個視頻替換視頻，然後當視頻播放時我想回到第一個視頻。有5個按鈕可以點擊，播放5個視頻，每次只播放一個視頻。點擊按鈕時播放HTML5視頻

我不是那麼懂JavaScript的人來做到這一點，我將不勝感激任何關於如何使用HTML5視頻做到這一點的幫助。

謝謝。

來源

2014-03-27 Xeopuppy

到目前爲止你做了什麼？在此之前，您是否嘗試過任何JavaScript或做過任何研究？您當前設置的任何代碼塊都會有所幫助。 – Jem

我在網上查找了一些教程，但他們只是演示如何點擊按鈕來播放視頻，但不能替換視頻，然後播放它，然後用原來的視頻替換該視頻。我做了類似的音頻，但在鼠標懸停，放置在文章標籤中的所有音頻和預加載音頻，它的工作原理，我正在考慮類似的視頻，但我只需要選擇它們... – Xeopuppy

我在想你可以把你的視頻放在一個div中，並在你的按鈕上按下javascript來調用javascript，用你的新視頻替換那個div的內容。但是，我還不確定如何將用戶重定向到您的原始視頻，缺少計時器（這對於緩衝時間不起作用，等等）。 – Jem

要更改按鈕上的視頻按鈕，您可以使用JavaScript函數將當前視頻替換爲您想要播放的視頻。

如果您知道您將播放的視頻的長度，您可以使用Javascript定時器在完成時替換新定時器。

下面是一個例子：http://jsfiddle.net/cHn3L/1/

頁代碼：

<div id="vid"> 
    <iframe width="236" height="105" src="//www.youtube.com/embed/AGg3u03JPfk?autoplay=1" frameborder="0" allowfullscreen></iframe> 
</div> 

<h1>Change Video</h1> 
<button onclick="PlayVid()">Change Video</button>

的Javascript：

resetVid = function() { 
    //get the Video div and replace with the original video source code 
    var videoPanel = document.getElementById('vid'); 
    videoPanel.innerHTML = '<iframe width="236" height="105" src="//www.youtube.com/embed/AGg3u03JPfk?autoplay=1" frameborder="0" allowfullscreen></iframe>';  
} 

PlayVid = function() { 
    //get the Video div and play new video on button click 
    var videoPanel = document.getElementById('vid'); 
    videoPanel.innerHTML = '<iframe width="280" height="157" src="//www.youtube.com/embed/ldT8qxWh07Y?autoplay=1&start=17" frameborder="0" allowfullscreen></iframe>'; 

    //replace video after 8.5 seconds 
    setTimeout(resetVid, 8500); 
}

這可能是與時機的問題，如果您的視頻需要時間來緩衝/負載在這種情況下，新視頻可能會過早切換回原始視頻。

來源

2014-03-27 19:47:35 Jem

太棒了，謝謝，我會試試看。 – Xeopuppy

讓我知道如果您有任何問題或進一步的問題，並請標記爲答案，如果這適用於你=） – Jem

我試過這個，但它沒有奏效，再加上我使用HTML5視頻標籤來顯示視頻不是iframes，但是這種方法無效...... – Xeopuppy

點擊按鈕時播放HTML5視頻

回答

相關問題