HTML and CSS Reference
In-Depth Information
Falls Sie Videos mittels HTML5 in viele Bereiche Ihrer Webpräsenz einbauen wollen
und alle über eine konstante Breite und Höhe verfügen sollen, empfiehlt es sich, das
video
-Tag gleich mit CSS am Anfang des Codes zu bearbeiten und die Standardhöhen
dem Tag generell zuzuweisen:
video { width: 320px; height: 240px; }
preload="none", preload="metadata", preload="auto"
Mit dem
preload
-Attribut kann bestimmt werden, dass ein Video teilweise oder voll-
ständig geladen wird, bevor der Benutzer die Wiedergabe starten kann. Sie können dem
Desktop-Browser mit diesem Attribut also mitteilen, ab wann Ihrer Meinung nach die
Wiedergabe eines Videos (oder einer Audiodatei) sinnvoll gestartet werden kann. Man-
che Browser ignorieren das
preload
-Attribut, wenn beispielsweise genug Bandbreite
zum einwandfreien Laden und gleichzeitigem Wiedergeben des Videos vorhanden ist.
Auch alle bislang bekannten mobilen Browser ignorieren dieses Attribut, da es eventuell
ungewollten und mitunter für den Benutzer teuren Netzwerk-Traffic verursachen
könnte. Folgende Werte kann das
preload
-Attribut haben:
•
none
- Ein Vorausladen der Audio- oder Videodatei ist nicht notwendig. Das sollten
Sie insbesondere dann verwenden, wenn das jeweilige Video kein Hauptbestandteil
der Seite ist und die Wahrscheinlichkeit nicht sehr groß ist, dass der Benutzer das
Video ansehen möchte.
•
metadata
- Hat die gleiche Auswirkung wie
none
, nur dass hier die sogenannten
Metadaten des Videos, also Dauer, Dateigröße etc., geladen werden, jedoch nicht die
wirklichen Audio- und Videodaten.
•
auto
- Sagt dem Browser, dass entweder einige Teile oder das komplette Video
idealerweise bereits vorgeladen werden sollten.
Safari kocht derzeit noch sein eigenes Süppchen und ignoriert das Attribut komplett,
hört aber auf ein Attribut namens
autobuffer
- das ebenfalls veranlasst, dass ein Video
nach Möglichkeit sofort in den Speicher geladen wird. Auch
autobuffer
ist in der
mobilen Safari-Version wirkungslos, da ein mobiler Nutzer über entstehenden Daten-
verkehr immer explizit selbst entscheiden muss.
2.4.5 Fehlerbehandlung
Sie haben sicherlich schon gemerkt, dass die Wiedergabe von Videos (und in bestimm-
tem Umfang auch die Wiedergabe von Audiodateien) eine recht komplexe Sache mit
vielen Fehlerquellen ist. Mithilfe der JavaScript-API kann man dem Benutzer zumindest
einige Fehlerquellen kommunizieren.
<!DOCTYPE html>
<html>
<head>
<title>Videoplayer mit Fehler Handling</title>
<meta name "layout" content "webkit" />
<style type "text/css" media "screen">
