隐藏(不删除)HTML5视频控件

Question

关于该主题的每个问题都 解释了如何删除 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}

如果您播放上述视频,并在不移动光标的情况下单独播放,则控件将消失.如果再次移动光标,它们将再次出现.他们也会在暂停或视频整理时出现.

非常像流行的原生或桌面视频播放器.

这就是我要的.我希望隐藏控件的方式与他们在视频播放时自动隐藏的方式相同,并且光标没有移动一段时间.

有没有办法实现这一点,而无需完全删除控件？

Answer 1

试试这个:

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

Answer 2

你不需要 JavaScript。使用CSS。显示：控件上无显示。