Javascript 隐藏（不删除）HTML5视频控件

主题说明如何删除HTML5视频元素的控件

videoElement.removeAttribute('controls');

但是Firefox和Chrome浏览器有一种隐藏控件的方法，当光标不移动，视频播放时，这些控件就会消失。并在移动光标或视频停止播放时使其再次显示

---

您不需要javascript。使用CSS。

---

显示：控件上无。

在视频上加一个div并隐藏/显示，您回答了自己的问题

我想隐藏控件，就像在播放视频且光标有一段时间没有移动时自动隐藏控件一样

再看看这个,

---

试试这个：

$（“#myvideo”）.hover（函数（）{
$（this.prop（“controls”，true）；
}，函数（）{
$（this.prop（“controls”，false）；
});
//如果你总是躲起来
$（“#myvideo2”）。单击（函数（）{
如果（这个暂停）
这个。play（）；
其他的
这个。暂停（）；
});


所有时间隐藏控件：

我正在使用videojs.com库，解决方案是添加

.vjs-control-bar {
    display:none !important;
}

到样式表。
您可以在视频上设置事件侦听器，并删除播放时的控件

<video id="video">
    <source src="http://example.com/video.mp4" type="video/mp4"/>
</video>

<script>
    video.addEventListener('play', () => {
        video.setAttribute('controls', 'true');
    });

    video.addEventListener('pause', () => {
        video.removeAttribute('controls')
    });
</script>


video.addEventListener（'play'，（）=>{
setAttribute（'controls'，'true'）；
});
video.addEventListener（'pause'，（）=>{
video.removeAttribute（“控件”）
});
您的意思是您有自己的一套控件，希望以这种方式操作吗？您很难尝试使用浏览器的默认控件集来执行此操作，因为正如您所说，它们已经以这种方式运行了。不，我只想隐藏默认控件。我正试图以浏览器的默认控件在不活动时隐藏自己的方式来实现这一点。有点像一种强制方式，但隐藏后我希望浏览器收回控件，然后在必要时再次显示它们，比如用户再次移动光标或视频停止。我只是想先隐藏控件。我不想一开始就删除它们，只是把它们隐藏起来。因为移除它们会使它无法玩空格键，或者移动时间线等等。我不确定你除了完全隐藏它们之外还能访问它们，就像你已经说过的那样。WebKit允许您通过：：-WebKit media controls伪类在CSS中访问它们，但Firefox似乎没有类似的功能。@AhosanKarimAsik和其他人，我非常感谢您的回答，谢谢！但所有的答案或多或少都已经在其他相关问题中给出了。我基本上想知道“隐藏”控件的“默认”方式，就像浏览器本身那样。这样我就不必担心编写任何css或javascript“黑客”来手动复制其他行为（如再次显示控件、播放/暂停等），而浏览器的控件已经完全能够做到这一点。现在似乎不可能。@laggingReflection您只需删除
控件
表单
标记，对于控件播放/暂停，您可以使用我的回答中提供的我的
单击
功能。添加拖动事件以确定向前和向后搜索也会很酷