HTML5-Video: So binden Sie Videos in Ihr HTML ein

Vor HTML5 müssten Sie ein Plugin wie Adobe Flash Player verwenden, um ein Video auf einer Webseite abspielen zu können. Mit der Einführung von HTML5 können Sie jetzt Videos direkt auf der Seite selbst platzieren.

Auf diese Weise können Videos auf Seiten abgespielt werden, die für mobile Geräte entwickelt wurden, da Plugins wie Adobe Flash Player unter Android oder iOS nicht funktionieren.

Das HTML- Element wird zum Einbetten von Videos in Webdokumente verwendet. Es kann eine oder mehrere Videoquellen enthalten, die mit dem srcAttribut oder dem Quellelement dargestellt werden.

Um eine Videodatei einzubetten, fügen Sie einfach diesen Codeausschnitt hinzu und ändern Sie srcden Pfad Ihrer Videodatei:

   Your browser does not support the video element. Kindly update it to latest version. 

Das Element wird von allen modernen Browsern unterstützt. Allerdings unterstützen nicht alle Browser dasselbe Videodateiformat. MP4-Dateien sind das am weitesten verbreitete Format, und andere Formate wie WebM und Ogg werden in Chrome, Firefox und Opera unterstützt.

Um sicherzustellen, dass Ihr Video in den meisten Browsern abgespielt wird, empfiehlt es sich, sie sowohl im Ogg- als auch im MP4-Format zu codieren und beide wie im obigen Beispiel in das Element aufzunehmen. Browser verwenden das erste erkannte Format.

Wenn der Browser aus irgendeinem Grund keines der Formate erkennt, wird stattdessen der Text "Ihr Browser unterstützt das Videoelement nicht. Bitte aktualisieren Sie es auf die neueste Version" angezeigt.

Möglicherweise haben Sie es auch controlsim Tag bemerkt . Dieses Element enthält viele nützliche Attribute zum Anpassen des Wiedergabeerlebnisses.

Attribute

controls

Das controlsAttribut behandelt, ob Steuerelemente wie die Wiedergabe- / Pause-Taste oder der Lautstärkeregler angezeigt werden.

Dies ist ein boolesches Attribut, dh es kann entweder auf wahr oder falsch gesetzt werden. Um es auf true zu setzen, fügen Sie es einfach dem Tag hinzu. Wenn es im Tag nicht vorhanden ist, wird es auf false gesetzt und die Steuerelemente werden nicht angezeigt.

autoplay

"Autoplay" kann entweder auf true oder false gesetzt werden. Sie setzen es auf true, indem Sie es dem Tag hinzufügen. Wenn es im Tag nicht vorhanden ist, wird es auf false gesetzt. Wenn true festgelegt ist, wird das Video abgespielt, sobald genügend Videos gepuffert sind, damit es abgespielt werden kann. Viele Leute empfinden das automatische Abspielen von Videos als störend oder ärgerlich. Verwenden Sie diese Funktion daher sparsam. Beachten Sie auch, dass einige mobile Browser, z. B. Safari für iOS, dieses Attribut ignorieren.

Dies ist ein weiteres boolesches Attribut. Durch Einfügen autoplayin das Tag wird das eingebettete Video abgespielt, sobald genug davon gepuffert ist.

Denken Sie daran, dass viele Leute das automatische Abspielen von Videos als störend oder ärgerlich empfinden. Verwenden Sie diese Funktion daher sparsam. Beachten Sie auch, dass einige mobile Browser wie Safari für iOS dieses Attribut vollständig ignorieren.

poster

Das posterAttribut ist das Bild, das im Video angezeigt wird, bis der Benutzer darauf klickt, um es abzuspielen.

Videos können teuer sein

Während es einfacher als je zuvor ist, Videos in Ihre Seite aufzunehmen, ist es oft besser, Ihre Videos auf einen Dienst wie YouTube, Vimeo oder Wistia hochzuladen und stattdessen deren Code einzubetten. Dies liegt daran, dass das Bereitstellen von Videos sowohl für Sie in Bezug auf die Serverkosten als auch für Ihre Zuschauer teuer sein kann, wenn sie nur über begrenzte Datenpläne verfügen.

Das Hosten eigener Videodateien kann auch zu Problemen mit der Bandbreite führen, was zum Stottern langsam ladender Videos führen kann. Darüber hinaus variieren die Qualität der Browser bei der Videowiedergabe in der Regel, sodass es schwierig ist, genau zu steuern, was Ihre Zuschauer sehen. Es ist auch sehr einfach, mit dem Tag eingebettete Videos herunterzuladen. Wenn Sie sich also mit Piraterie befassen, sollten Sie andere Optionen prüfen.

Und damit können Sie Videos nach Herzenslust einbetten. Oder nicht - es ist dein Anruf.