如何在點擊視頻時顯示視頻標籤的控制面板

Question

我在responsive.css中使用此「視頻:: - webkit-media-controls-panel {display：none}」隱藏了移動視頻控制面板，因爲它佔據了視頻的高度。 但是我想在用戶點擊視頻屏幕時顯示控制面板。 我該怎麼做？任何幫助，將不勝感激。 比你

Answer 1

而不是使用陰影DOM，您是否嘗試過使控件可見或不是 - 在這種情況下，它們默認隱藏，但當用戶鼠標點擊並隱藏時顯示（可觸發）在其他地方點擊或當視頻開始播放時）

<video width="400" controls id="video" onclick="mox(true);" onmouseout="mox(false);"> 
    <source src="bigbuck.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
</video> 

<script> 
// get the video element 
var video = document.getElementById("video"); 

// attach a listener to hide controls when video starts playing 
// note: you probably want some more logic to make this a more usable experience 
video.addEventListener('playing', mox(false),false); 

// hides the controls 
mox(false) 

function mox(s) { 
    if (s) { 
     video.controls = "controls"; 
    } else { 
     video.controls = ""; 
    } 
} 
</script>