Javascript 隐藏（不删除）HTML5 视频控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28601762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide (not remove) HTML5 video controls
提问by laggingreflex
Everyquestiononthesubject explain how to removethe controls of an HTML5 video element.
关于该主题的每个问题都解释了如何删除HTML5 视频元素的控件。
videoElement.removeAttribute('controls');
But browsers, Firefox and Chrome, have a way of just hidingthe controls which makes them disappear when cursor is not moving and the video is playing. And makes them appear again if you move the cursor or when video stops playing.
但是浏览器，Firefox 和 Chrome，有一种方法可以隐藏控件，当光标不移动并且视频正在播放时，它们会消失。并在您移动光标或视频停止播放时使它们再次出现。
<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>Video test file: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
视频测试文件：http: //clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
If you play the above video, and leave it alone without moving the cursor, the controls will disappear. The if you move the cursor again they'll appear again. They'll also appear upon pausing or video finishing.
如果您播放上述视频，并且不移动光标而将其搁置一旁，则控件将消失。如果您再次移动光标，它们将再次出现。它们也会在暂停或视频结束时出现。
Very much like popular native or desktop video players.
非常像流行的原生或桌面视频播放器。
This is what I want. I want to hidethe controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
这就是我要的。如果视频正在播放并且光标有一段时间没有移动，我想以与它们自动隐藏的方式相同的方式隐藏控件。
Is there a way to achieve this without removing the controls entirely?
有没有办法在不完全删除控件的情况下实现这一目标？
回答by Ahosan Karim Asik
Try this:
尝试这个：
$("#myvideo").hover(function() {
$(this).prop("controls", true);
}, function() {
$(this).prop("controls", false);
});
// if always hide
$("#myvideo2").click(function() {
if( this.paused)
this.play();
else
this.pause();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="myvideo" width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>回答by Javi Qualms Pdog
Put a div over the video and hide/show that, you answered your own question;
在视频上放一个 div 并隐藏/显示，你回答了你自己的问题；
I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
如果视频正在播放并且光标有一段时间没有移动，我想以与它们自动隐藏的方式相同的方式隐藏控件。
Also take a look at this;
也看看这个;
回答by maaw
I'm using videojs.com library and the solution was to add
我正在使用 videojs.com 库，解决方案是添加
.vjs-control-bar {
display:none !important;
}
to the stylesheet.
到样式表。
回答by THE AMAZING
you don't need javascript. use CSS. Display:none on the controls.
你不需要javascript。使用 CSS。显示：控件上无。
