隐藏(而不是删除）HTML5视频控件

Hide (not remove) HTML5 video controls

本文关键字：HTML5 视频 控件 删除 隐藏      更新时间：2024-01-25

主题上的每个问题都解释了如何删除HTML5视频元素的控件。

videoElement.removeAttribute('controls');

但Firefox和Chrome浏览器有一种方法可以隐藏控件，当光标不移动和视频播放时，控件就会消失。当您移动光标或视频停止播放时，它们会再次出现。

<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

视频测试文件：http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

如果您播放上述视频，并且不移动光标而将其单独放置，则控件将消失。如果再次移动光标，它们将再次出现。它们还会在暂停或视频结束时出现。

非常像流行的本地或桌面视频播放器。

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

有没有一种方法可以在不完全取消控制的情况下实现这一点？

试试这个：

$("#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>

在视频上放一个div并隐藏/显示，你就回答了自己的问题；

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

也可以看看这个；

样式化HTML5视频控件

我使用的是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::-webkit-media-controls {
      display: none;
    }

您不需要javascript。使用CSS。显示：控件上无。

相关文章：