HTML: Wie kann ich den Play-Button für mein Video unsichtbar schalten und bei Klick auf das Video die Wiedergabe pausieren / fortsetzen?

Moin meine aktiven Freunde!

Ich habe eine Frage. Und zwar möchte ich ein Video auf meiner Webseite abspielen.

Das funktioniert auch prima! Aber ich möchte, dass der Play-Button unsichtbar ist und wenn man auf das Video draufdrückt, das es sich pausiert / weiterspielt.

Geht das?

Answer 1

[regex9]

Lass das controls-Attribut auf dem video-Tag weg, dann verschwindet auch die Leiste mit den Kontrollflächen.

Die zweite Anforderung kann man mit JavaScript umsetzen:

<video id="videoplayer">
  <!-- ... -->
</video>
<script>
  const player = document.getElementById("videoplayer");
  player.addEventListener("click", function() {
    if (this.paused) {
      this.play();
    }
    else {
      this.pause();
    }
  });
</script>

Comments

[YTAli]

Wen ich den controls Attribut entferne, dann verschwindet das video. Warum?

[regex9]

@YTAli

Das passiert in der Regel nur, wenn keine Videoquelle gegeben ist / geladen werden kann.