HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 164

große Videodateien herunterzuladen. Ein Smartphone-Video muss zum Abspielen
also immer angeklickt werden.
Die Standardansicht ist ein schwarzer Kasten mit einem runden Play-Button in der
Mitte. Wird keine Videogröße angegeben, stellt Safari das Video in 150 × 300 Pixel
Größe dar.
Videos auf dem iPhone und iPod werden immer im Vollbildmodus abgespielt. Sobald
der Nutzer auf Play tippt, werden alle anderen Elemente der Webseite ausgeblendet
und die Bedienelemente des Videoplayers eingeblendet.
Das richtige Videoformat auswählen
Zurzeit gibt es für HTML5 noch verschieden gängige Videoformate: OGG Theora wird
als Open-Source-Codec von Firefox und Opera unterstützt, seit Version 3.0 auch vom
WebKit-basierten Chrome. Safari verarbeitet allerdings ausschließlich Apple-Codecs,
dazu zählt neben dem QuickTime-Format MOV auch die Apple-Entwicklung H.264 ,
welche, als Teil des MPEG-4-Standards, Videos in HD-Auflösung wiedergeben kann.
Wollen Sie ein Video einbetten, welches in allen aktuellen Browsern angezeigt wer-
den kann, müssten Sie also mehrere Quelldateien in verschiedenen Codierungen
verknüpfen. Dies gelingt mit dem source -Tag, welches in das video -Element einge-
bunden wird:
<video>
<source src="video.mp4">
<source src="video.ogg">
</video>
In diesem Fall benötigen Sie kein src -Attribut, der Browser wählt automatisch die
von ihm unterstützte Videoquelle aus.
Auf mobilen WebKit-Browsern gestaltet sich das etwas einfacher: Sie unterstützen
ausschließlich H.264 -Videos mit einem Baseline Profil. Allerdings müssen Sie hier
neben dem Codec auch noch die maximalen Auflösungen, Frame-Raten und Bit-
Raten beachten, also die erlaubte Dateigröße pro Sekunde. Kurzum: Die Aufberei-
tung einer Videodatei für ein Mobilgerät ist eine Wissenschaft für sich.
Glücklicherweise gibt es Hilfsmittel, die Ihnen die Umwandlung in ein mobilfähiges
Format abnehmen. Ein sehr gutes und kostenloses Werkzeug ist der Miro Video Con-
verter (Abbildung 4.28).