在播放结束时隐藏视频控件[重复]

Posted 2023-05-07

【中文标题】在播放结束时隐藏视频控件[重复]

【英文标题】：Hiding video controls at end of playback [duplicate]

【发布时间】：2020-02-20 03:55:52

【问题描述】：

html 视频元素的默认行为会导致视频控件出现在播放结束时。有没有办法改变这种行为，使视频控件保持隐藏状态？

我假设源代码中有一个 if 语句，用于确定视频结束时控件是否可见。

我尝试在视频结束时移除控件，但这些控件根本无法访问。

player.addEventListener('ended', () => 
  player.removeAttribute( 'controls' );
);

我尝试移除控件然后设置控件，但控件仍然出现。

player.addEventListener('ended', () => 
  player.removeAttribute( 'controls' );
  player.setAttribute( 'controls', '' );
);

我也尝试将控件设置为 false，但这与删除属性“控件”相同。

player.addEventListener('ended', () => 
  player.controls = false
);

【问题讨论】：

将控件设置为 false，在视频焦点/触摸/鼠标交互时只需将它们添加回来。

【参考方案1】：

基本上你就快到了。只需使用

    player.addEventListener('ended', () => 
      player.removeAttribute('controls');
    );

（删除了video_obj）

【讨论】：

抱歉。我更新了OP。在我的代码中，播放器是一个对象，它的属性 video_obj 是实际的视频元素。

太棒了。我认为你不能简单地通过使用 controls 属性来做你想做的事。 Roko C. Buljan 的选择是最简单的......

【参考方案2】：

我正在使用以下代码在没有任何控件的情况下循环观看视频。

<video id="player" autoplay loop muted>
  <source src=".../your/source.mp4" type="video/mp4" />
</video>