如何使用按鈕跟蹤HTML中的視頻閃屏頁？

作爲一個噱頭，我試圖在頁面加載時有一個簡短的視頻自動播放，然後按下「Enter」按鈕。我想出了HTML如何讓視頻自動播放，但我很難在它結束後切換到按鈕。如何使用按鈕跟蹤HTML中的視頻閃屏頁？

我的代碼來獲取視頻自動播放：

<video class="video" width="320" height="240" autoplay> 
 
    <source src="Toei.mp4" type="video/mp4">

（CSS類已經被添加到擁有它全屏播放）

我添加了一個JS事件結束時

var video = document.querySelector("video"); 
 

 
video.addEventListener("ended", function(){ 
 
\t video.setAttribute("button", "newButton") 
 
});

我得到setAttribute方法可能不會爲了改變元素的屬性工作，但我發現很難找到如何：

有一個事件（視頻結束）和更改從「視頻」結束的元素的屬性到「按鈕」

- 在css中選擇此事件/屬性以編輯樣式。

這是一個非常簡單和短的視頻，應該跟着一個'進入'按鈕，以便去實際的主頁。

來源

2016-10-01 ThoMol84

爲什麼不只是在按鈕上覆蓋了一個按鈕（例如，絕對定位）在視頻上。默認隱藏它，然後在你的「電影結束」處理程序中用按鈕顯示div。

下面是應該這樣做的代碼。您必須對精確的定位和樣式進行調整，當然也可以讓按鈕做某事/去某個地方。

var video = document.querySelector("video"); 
 

 
video.addEventListener("ended", function() { 
 
\t document.getElementById("myBtn").style.display = "block"; 
 
});

#myBtn { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 320px; 
 
    height: 240px; 
 
    text-align: center; 
 
    background-color: #ff0000; 
 
    display: none; 
 
} 
 

 
#myBtn > button { 
 
    margin-top: 100px; 
 
}

<video id="myVid" class="video" width="320" height="240" autoplay> 
 
    <source src="Toei.mp4" type="video/mp4"> 
 
</video> 
 
<div id="myBtn"> 
 
    <button type="button">Go Somewhere</button> 
 
</div>

新#myBtn DIV絕對定位在其中視頻的位置，但#myBtn默認情況下（display: none）隱藏。在視頻結束事件處理程序中，display樣式屬性更改爲block，以便#myBtn變爲可見並覆蓋視頻播放器。

來源

2016-10-01 01:25:32

你能解釋一下代碼嗎？ – ThoMol84

是的，但在大約45分鐘。目前我不在電腦上。 :) –

非常好，謝謝！ – ThoMol84

如何使用按鈕跟蹤HTML中的視頻閃屏頁？

回答

相關問題