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

Posted 2023-05-07

【中文标题】隐藏（不删除）HTML5 视频控件

【英文标题】：Hide (not remove) HTML5 video controls

【发布时间】：2015-04-20 12:36:34

【问题描述】：

Every question on the 主题解释如何删除 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}

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

非常类似于流行的原生或桌面视频播放器。

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

有没有办法在不完全删除控件的情况下实现这一点？

【问题讨论】：

您的意思是您有自己的一组控件并希望以这种方式操作？正如您所说，您几乎无法尝试使用浏览器的默认控件集来执行此操作，因为它们已经以这种方式进行操作。

不，我只想隐藏默认控件。我正在尝试完全按照浏览器的默认控件在不活动时隐藏自己的方式来做到这一点。有点像强制方式，但是在隐藏之后我希望浏览器收回控制权，然后在认为有必要时再次显示它们，比如用户再次移动光标或视频停止。我只想最初隐藏控件。我最初不想删除它们，只是隐藏它们。因为删除它们会使其无法使用空格键或移动时间线等。

我不确定您是否可以访问它们，除了完全隐藏它们，就像您已经说过的那样。 WebKit 允许您通过 ::-webkit-media-controls 伪类在 CSS 中访问它们，但 Firefox 似乎没有类似的东西。

@AhosanKarimAsik 和其他人，我非常感谢您的回答，谢谢！但是所有的答案或多或少已经在其他各种相关问题中给出。我基本上想知道以 same 方式“隐藏”控件的“默认”方式，浏览器本身就是这样做的。这样我就不必担心编写任何 css 或 javascript “hacks”来手动复制其余的行为（如再次显示控件、播放/暂停等），浏览器的控件已经完全能够做到。目前看来是不可能的。

@laggingreflex 您只需从 <video > 标记中删除 controls 并控制播放/暂停您可以使用我的答案中提供的 click 函数..

【参考方案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"    >
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay   >
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>

【讨论】：

添加一个拖动事件来确定向前和向后搜索也很酷

【参考方案2】：

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

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

也看看这个；

Styling HTML5 Video Controls

【参考方案3】：

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

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

到样式表。

【参考方案4】：

您可以在视频上设置事件监听器并删除播放控件

<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>

【参考方案5】：

使用这个：

    video::-webkit-media-controls 
      display: none;
    

【讨论】：

最初的发布者是在寻找一种基于用户活动或玩家状态来控制隐藏/显示控件的方法，而无需跳转到脚本/css 领域。此外，这只会完全隐藏控件。

但是右键视频的时候，有一个菜单列表，可以选择“显示控件”，自己写控制栏的时候，由于用户选择显示原生的控制栏，这样会导致两个控制栏重叠，我的回答是避免这种情况，其实这个只有chrome有效，Safari和Firefox都没有，看youtube

是的 - 我得出了同样的结论 - 这意味着解决这个跨浏览器的唯一方法是深入编写特定于客户端的脚本/样式的领域。我还怀疑主要的流媒体平台（例如：youtube）可能会通过自定义脚本实现 OP 提到的“默认行为”，从而使不同浏览器客户端的行为保持一致。

【参考方案6】：

你不需要javascript。使用 CSS。 Display:none 在控件上。