Question

我使用这个＆＃34;视频:: - webkit-media-controls-panel {display：none}＆＃34;将视频控制面板隐藏在移动设备上。在responsive.css中，因为它占据了视频的高度。但是我想在用户点击视频屏幕时显示控制面板。我该怎么做？任何帮助，将不胜感激。比你

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>

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

1 个答案: