结束播放时隐藏视频控件

Question

默认情况下，html视频元素会在播放结束时显示视频控件。是否有方法可以改变这种行为，使视频控件保持隐藏？

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

我尝试在视频结束时删除控件，但是这样控件就完全无法访问了。

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

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

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

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

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

- kpete4678

---

将控件设置为 false，在视频焦点/触摸/鼠标交互中，只需将它们重新添加即可。 - Roko C. Buljan

Answer 1

基本上你已经快到了。只需要使用

即可。

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

（删除了video_obj）

- dev village

---

哦抱歉。我更新了原帖。在我的代码中，玩家是一个对象，它拥有一个video_obj属性，它是实际的视频元素。 - kpete4678

很好。我认为你不能仅通过使用“controls”属性来实现你想要的功能。Roko C. Buljan提供的选项是最简单的... - dev village

Answer 2

我正在使用以下代码循环播放一个视频，而且完全没有控制功能。

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

- davidev