Information Technology Reference
In-Depth Information
Für CSS3 wurden Media Queries deutlich erweitert, sodass jetzt neben bekann-
ten Keywords wie
print
,
screen
,
handheld
oder
projection
auch komplexe Anga-
ben wie die folgende möglich sind:
media="screen and (min-width: 800px)"
Hier wird es für die Video-Ausgabe sehr spannend, denn abhängig von der Grö-
ße des Browsers kann das Video in unterschiedlichen Auflösungen angeboten
werden. Durch diesen Trick können auch mobile Endgeräte mit kleineren Dis-
plays und langsamer Internetanbindung perfekt bedient werden. Ein vollstän-
diges Beispiel für die Anzeige eines verkleinerten Video-Formats auf der Basis
von Media Queries sieht folgendermaßen aus:
<!DOCTYPE html>
<title>Simple Video</title>
<video controls autoplay>
<source src='videos/mvi_2170.webm' type='video/webm'
media="screen and (min-width: 500px)" >
<source src='videos/mvi_2170_qvga.webm'
type='video/webm' media="screen" >
Ihr Browser kann das Video leider nicht anzeigen.
</video>
Browser, die weniger als 500 Pixel Breite für die Anzeige des Videos zur Verfü-
gung haben, zeigen automatisch das verkleinerte Video
mvi_2170_qvga.webm
an.
HINWEIS
Die Spezifikation von CSS3-Media-Queries hat derzeit den Status
Editors Draft
.
Es ist daher zu erwarten, dass sich einige Details noch verändern werden. Den
aktuellen Stand der Spezifikation finden Sie immer beim W3C:
http://dev.w3.org/csswg/css3-mediaqueries/
Als zweites Kriterium für die Entscheidung, welches Video angezeigt werden
soll, dient der MIME-Typ. Durch die optionale Ergänzung um die verwende-
ten Codecs erkennt der Browser schon vor dem Laden, ob das Video dekodiert
werden kann. Aber was steckt hinter diesen Codecs? Im nächsten Abschnitt
versuchen wir, etwas Licht in den Codec-Dschungel zu bringen.
4.3 Video-Codecs
Moderne Video-Formate verwenden eine
Container-
Datei, in der Audio- und
Video-Inhalte getrennt voneinander gespeichert werden. Dieser flexible Ansatz
hat mehrere Vorteile. Zum Beispiel können so mehrere Audio-Spuren in einer
