如何在点击视频时显示视频标签的控制面板

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>