Es gibt einen einfachen Weg, Video- und Audiodateien auf Webseiten abzuspielen. Und zwar mit dem <video> und <audio> Element von HTML5. Dazu wird lediglich eine fertige Mediendatei auf dem Server benötigt, für Video .mp4, .webm und für Audio normalerweise .mp3 oder .ogg. Wie man Video- und Audiodateien auf der Website einrichtet, welche Möglichkeiten man hat und welche Probleme auftreten können, wird in der folgenden Anleitung erklärt.
Video- und Audiodateien auf den eigenen Webserver hochladen
Um Video- und Audiodateien abspielen zu können, müssen diese zuerst auf den eigenen Webserver hochgeladen werden. Wenn eine Joomla Installation verwendet wird, kann es vorkommen, dass ein Upload über den Medienmanager nicht so einfach zu bewerkstelligen ist, weil die Dateigrößen die von den PHP-Einstellungen bzw. Joomla-Einstellungen übersteigt. Dies tritt vor allem bei Video-Dateien auf.
Um dieses Problem zu umgehen, empfehlen wir den Upload via FTP-Client (z.B. Filezilla).
In unserem Beispiel gehen wir davon aus, dass im "/images/"-Ordner der Website eine Video-Datei mit dem Dateinamen "beispiel.mp4" hochgeladen wurde.
Das <video> Element
Mit Hilfe des HTML-video Elements ist es unkompliziert möglich, ein Video auf einer Website abzuspielen:
<p>Ihr Browser unterstützt kein HTML5 video. <a href="/images/beispiel.mp4">Hier klicken</a> um das Video herunterzuladen.</p>
</video>
Erklärung der einzelnen Elemente:
src
Genau wie bei klassischen Bildelementen in HTML benötigt das Videoelement einen Pfad oder Link zur abzuspielenden Quelle.
controls
Zeigt die Steuerelemente für das Video an, Abspielen, Pause, Zeitleiste, Lautstärke etc.
p Element im Video
Hier handelt es sich um eine Fallback-Lösung, falls der Browser nicht in der Lage ist, das Video abzuspielen.
Verschiedene Videoformate und Browser
Leider unterstützt nicht jeder Browser alle Videoformate. Vor allem Safari und Internet Explorer haben bei bestimmten Formaten Schwierigkeiten. Um dieses Problem zu umgehen, kann man das Video in verschiedenen Formaten anbieten. Im nächsten Codebeispiel wird die Einbindung von mehreren Videoquellen gezeigt.
Weitere <video> Möglichkeiten
Im folgenden Codebeispiel soll zum einen eine Möglichkeit vorgestellt werden, mehrere Datenquellen zu verwenden. Zum anderen sollen weitere mögliche Optionen für Videos aufgezeigt werden:
<source src='images/beispiel.mp4' type='video/mp4'>
<source src='images/beispiel.webm' type='video/webm'>
<p>Ihr Browser unterstützt kein HTML5 video. <a href="/images/beispiel.mp4">Hier klicken</a> um das Video herunterzuladen.</p>
</video>
Erklärungen zu den einzelnen Erweiterungen:
width und height
Die Breite und Höhe des Video-Containers. Es spielt keine Rolle, welche Werte hier gewählt werden, da das Video immer seinen nativen Aspect-Ratio behält. Bereiche des Containers werden dann mit der gewünschten Hintergrundfarbe ausgefüllt.
autoplay
Dieses Attribut startet das Video automatisch. Man sollte vorsichtig damit umgehen, vor allem wenn die Video-Datei mit Musik oder Audio hinterlegt ist. Bei stummen Videos kann autoplay problemlos verwendet werden.
loop
Das Video startet am Ende automatisch wieder neu. Dies kann störend auf die Nutzer wirken, außer das Video ist für einen Loop ausgelegt.
muted
Das Video wird standardmäßig lautlos abgespielt. Diese Option ist vor allem in Kombination mit autoplay zu empfehlen.
poster
Dieses Attribut erwartet die URL eines Bildes. Dieses Bild wird angezeigt, bevor das Video spielt. Es ist quasi ein Platzhalter-Bild, bevor der User auf den Play-Button klickt.
preload
Dieses Attribut wird verwendet, um große Video-Dateien zu "buffern":
- "none": Die Datei wird nicht vor dem Abspielen heruntergeladen. Wenn der Nutzer auf Play klickt, muss zuerst das Video heruntergeladen werden.
- "auto": Die Datei wird vor dem Abspielen heruntergeladen. Wenn der Nutzer auf Play klickt, startet das Video sofort.
- "metadata": Nur die Metadaten werden heruntergeladen. Der Nutzer muss - je nach Internetleitung - eine bestimmte Zeit auf das Video warten.
Das <audio> Element
Das <audio> Element funktioniert exakt wie das Video-Element, jedoch mit einigen kleinen Unterschieden, welche unter dem Codebeispiel zu finden sind:
<p>Ihr Browser unterstützt kein HTML5 audio. <a href="/images/beispiel.mp3">Hier klicken</a> um die Audiodatei herunterzuladen.</p>
</audio>
Das Audio-Element unterstützt keine Breiten und Höhenangaben und kein Poster. Es gibt keine visuellen Zusatzkomponenten. Ansonsten sind alle Optionen, wie bei HTML5 Video, möglich.