藤像HTML球員5

Question

你如何使用HTML 5個標記

<video width="600" height="600" loop preload="auto" video poster="img.jpg" controls> 
    <source src="my-video-file.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</video> 

我想要做什麼做類似什麼藤使用播放器是繼

• 刪除控制欄
• 添加像藤蔓播放器（懸停）上的音量按鈕
• 底部覆蓋div以顯示信息（懸停時）

例藤球員

https://vine.co/v/h7tUrqaWuTB/embed 

如果誰能給我小費或告訴我的地方，我可以得到關於如何做到這一點的高度讚賞一些信息。感謝和進步。

Answer 1

對於懸停div，您將需要JavaScript。 div應該使用CSS默認隱藏。

var divToShow = document.getElementById('divToShow'); 
var video = document.querySelector('video'); //gets the video element 
video.addEventListener('mouseover', function(element) { 
    divToShow.style.display = 'block'; //show the div (block could be replaced with any of the display options) 
}); 
video.addEventListener('mouseout', function(element) { 
    divToShow.style.display = 'none'; //hide the div 
}); 

新波士頓有一個HTML5教程，其中包含四個或五個使用javascript視頻API的視頻標籤自定義視頻。他們可能會幫助你處理其他問題。

The New Boston HTML5 Tutorial