HTML Video Autoplay in Chrome und Safari

Das Einbetten von Videos auf Webseiten ist nicht nur ästhetisch ansprechend, sondern auch ein effektives Mittel, um Informationen zu vermitteln. Allerdings können sich bei der Verwendung des HTML Video Tags Herausforderungen ergeben, insbesondere in Bezug auf das Autoplay-Feature in Browsern wie Google Chrome und Safari.

Mehr Infos über die Autoplay Policy von Google Chrome

In diesem Artikel betrachten wir ein häufiges Problem und zeigen, wie durch die korrekte Anordnung von Attributen eine nahtlose Videowiedergabe gewährleistet wird.

Falscher Code

Beim Einbinden von Videos mit dem HTML Video Tag ist die richtige Reihenfolge der Attribute entscheidend, insbesondere im Hinblick auf das Autoplay-Feature in Google Chrome und Safari. Ein häufiger Fehler besteht darin, das "muted" Attribut nach dem "autoplay" Attribut zu platzieren, was zu unerwünschten Ergebnissen führen kann.

Die Verwendung dieses Codes birgt das Risiko, dass das Autoplay-Feature nicht wie erwartet funktioniert.

Hier ist ein Beispiel für falschen Code, den es zu vermeiden gilt:

<video autoplay src="video.mp4" muted controls>
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

Richtiger Code

Um sicherzustellen, dass das Autoplay-Feature in Google Chrome und Safari reibungslos aktiviert wird, sollte das "muted" Attribut vor dem "autoplay" Attribut platziert werden.

Diese Anpassung gewährleistet, dass das Video automatisch abgespielt wird, während gleichzeitig die Anforderungen der Browser erfüllt werden. Beachten Sie diese Reihenfolge, um eine störungsfreie Videowiedergabe sicherzustellen.

Hier ist das korrekte Beispiel:

<video muted autoplay src="video.mp4" controls>
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

---

Für mehr News folge uns auf: