Kleine CodeCrowd von programmieren lernen

Video und Audio in HTML

In diesem Tutorial dreht sich alles um Video und Audio in HTML. Als Bonusmaterial zum HTML Online Kurs habe ich dieses Deep-Dive zum Thema Video und Audio in HTML erstellt und teile diesen hier auch mit euch.

Video und Audio in HTML gewinnen an Bedeutung

Die neuen Video- und Audio-Elemente die mit HTML5 eingeführt wurden, machen es uns deutlich einfacher Multimedia-Inhalte in HTML-Dokumente einzubinden. Wie du vielleicht schon in dem fortgeschrittenen Teil des HTML Kurses gelernt hast, war es vor HTML5 nötig Video und Audio per Plugins, wie QuickTime oder Flash einzubinden. Dies war aus unterschiedlichen Gründen, wie Einfachheit für den Entwickler, Performance und Responsivität nicht optimal.

Dank der neuen HTML5 Video- und Audio-Tags ist es so einfach eine Multimedia-Datei einzufügen, als würdest du ein Bild oder Text in deine Website einfügen.

Während Text und Bilder lange Zeit die wichtigsten Elemente einer Website waren, gewinnt Multimedia mit Video und Audio immer mehr an Bedeutung. Dank Formate wie YouTubes On-Demand-Videos und Podcasts sind diese Inhaltstypen nicht mehr aus dem täglichen Coding-Alltag wegzudenken. Auch die Artikelseiten des CodeCrowd-Blogs enthalten immer mindestens eine Video-Datei.

In diesem Tutorial lernen wir im Detais wie die HTML5-Video- und Audio-Tags verwendet werden, um Medien in deine Websites einzubinden.

Das Tutorial-Projekt

Ich habe uns eine simple HTML-Datei angelegt, in der ich ein HTML-Grundgerüst hinzugefügt habe und die Elemente mit CSS zentriert sowie den Text ein wenig formatiert habe.

Wie immer findest du einen Link zum Quellcode dieses Artikels in der Infobox.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

    <title>Video und Audio in HTML</title>
    
    
    
</head>
<body>
    
Das Video und Audio-Element in HTML5

    
Video-Element


    
Audio-Element

    
</body>
</html>

Das HTML5-Video-Element

Das HTML5-Video-Tag fügt einen Media-Player und dein gewünschtes Video in eine Website ein.
Um nun ein Video hinzuzufügen, nutzen wir simpel das Video-Tag und fügen mit dem src="" Attribut die Pfad des Videos auf einem Server ein. Dies kennst du sicher schon von dem Image-Tag aus einem vorangegangenen Teil des HTML-Kurses.

Der Unterschied zum <img> Tag ist, dass wir bei dem <video> Tag auch ein type="" Attribut angeben, um festzulegen, welches Video-Format wir angeben wollen. In unserem Fall ist dies MP4.

Audio-Element

Und schon hast du ein Video korrekt in HTML eingebunden. Das war mal wieder super einfach, oder?

Alleinstehendes oder schließendes Tag

Noch ein kleines Detail: Anders als das Image-Tag ist das Video-Tag kein alleinstehendes Tag, sondern hat ein schließendes Tag </video> am Ende. Du kannst das Video-Tag aber auch als alleinstehendes Tag verwenden. Beide Varianten siehst du hier:





<video src="https://code-crowd.de/videos/video-und-audio-in-html.mp4" type="video/mp4" />

Der Vorteil kein alleinstehendes Tag zu verwenden ist die Erreichbarkeit für nicht sehende User, also Screenreader. Denn zwischen die Beiden Video-Tags, kannst du einen Text anzeigen der vorgelesen wird, sollte der Screenreader (oder ein anderer Client) keine Videos abspielen können.

src oder source

Du kannst die Quelle des Videos wie gesagt mit dem src="" Attribut angeben.

Ein alternativer Weg ist, die Video-Quelle mit dem <source> Tag innerhalb des <video> Tags anzugeben.

Der Vorteil des <source> Tags ist es, dass du verschiedene Video-Formate angeben kannst (in unserem Beispiel WebM und MP4), sodass der Browser sich das für ihn passende Format auswählen kann.
Gibt möglichst viele Video-Formate (wie MP4, WebM und OGG) an, um möglichst viele Browser zu unterstützen.

Elementare Attribute des Video-Tags

Neben den Attributen src="" und type="" gibt es weitere wichtige Attribute die du mit dem Video-Tag verwenden solltest.

Controls

Mit dem controls Attribut fügst du dem Player Kontroll-Elemente hinzu.
Das Attribut hat keinen Wert, da es sich um ein Boolean handelt. Falls du nicht weißt, was das ist, keine Sorge. Auf diese komplexeren Themen gehen wir bald in einem anderen Video auf YouTube ein.

Autoplay

Mit dem autoplay Attribut (ebenfalls ohne Wert) wird das Video nach dem Laden der Website automatisch abgespielt. Dies funktioniert in manchen Browsern nur gemeinsam mit dem muted Attribut.

width/height

Mit dem width="" und dem height="" Attribut kannst du wie gewohnt die Höhe und Breite des Videos anpassen.

loop

Das loop Boolean-Attribut setzt das Video nach dem Spielen wieder an den Anfang zurück.

muted

Das muted Boolean-Attribut setzt das Video auf lautlos.

poster

Das poster="" Attribut kann eine Bild-URL enthalten. Das angegebene Bild wird angezeigt, bis das Video abgespielt wird.

Unser vollständiges Video-Element mit allen gelernten Attributen sieht also folgendermaßen aus:

So sieht der aktuelle Status im Browser aus:
Video und Audio in HTML5

Hinweis: Es gibt weitere Video-Attribute wie buffer, preload, played, crossorigin und playsinline, welche aber ser selten verwendet werden, sodass ich eine Erläuterung hier für zu weitgehend halte.

Das HTML5-Audio-Element

Da du nun das Video-Element verstanden hast, wird es ein leichtes für dich sein, das Gelernte auf das Audio-Element zu übertragen, denn die beiden Elemente sind sich sehr ähnlich. Der einige große Unterschied liegt auf der Hand: Ein Audio-Tag fügt einen Audio-Player ein und hat andere Medienformate, wie zum Beispiel MP3.

Fügen wir also ein Audio-Element ein und du wirst sehen, dass du die Neuerungen direkt verstehst.

Audio-Element

Ich habe lediglich Attribute die für Audio keinen Sinn (wie width="", height="", poster="" und muted) machen gelöscht und das Wort Video geben Audio ausgetauscht. Außerdem das Formt von MP4 zu MP3 geändert.

So sieht dann das Ergebnis mit dem Video- und dem Audio-Element im Browser aus.
Video und Audio in HTML - Audio

Ich hoffe diese etwas detaillierte Erläuterung der immer wichtiger werdenden Media-Elemente in HTML hat dir geholfen.
Falls du Fragen hast, schreibe mir gern in den Kommentaren.

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.

Infobox

Kommentare