10 Einbinden von Video und Audio

Frank L. Schad
Das HTML5 Lernbuch
Art.-Nr. 12a822e977d6
Version 3.7.2 vom 21.4.2015
Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm
© 2015 by Webmasters Press
www.webmasters-press.de
Nordostpark 7, 90411 Nürnberg, Germany
Das vorliegende Fachbuch ist urheberrechtlich geschützt. Alle Rechte
vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen
sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Fachbuch wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren
und Herausgeber übernehmen keine juristische Verantwortung oder
irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und
deren Folgen.
Informationen zu dieser
Buchreihe
Dieses Buch ist Teil unserer Buchreihe zum Zertifizierungsprogramm des Europäischen Webmasterverbandes, Webmasters Europe e.V. (WE).
Das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm ist modular aufgebaut
und bietet Abschlüsse und Zertifizierungen auf verschiedenen Ebenen an – von der ExpertenZertifizierung für einzelne Themen bis hin zu Diploma-Abschlüssen für Webdesigner, WebEntwickler, Webmaster und Online Marketing Manager. Nähere Informationen dazu finden Sie
unter http://de.webmasters-europe.org/bildungsprogramm
Unsere Buchreihe bietet Ihnen nicht nur eine fundierte und praxisnahe Einführung in das
jeweilige Thema, sondern ist von Webmasters Europe e.V. offiziell autorisiert zur Vorbereitung
auf die WE-Zertifikatsprüfungen. Damit haben Sie die Garantie, dass alle prüfungsrelevanten
Themen behandelt werden.
Inhaltsverzeichnis
1
2
3
Vorwort
11
Was ist HTML?
12
1.1
1.2
1.3
1.4
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.6
12
Das World Wide Web
Was ist Hypertext?
Das Prinzip von Auszeichnungssprachen
Die Philosophie von HTML
HTML: Entwicklung und Standards
Die Ursprünge des World Wide Web
Das World Wide Web Consortium (W3C)
XHTML
HTML5
Die Webbrowser
Fragen zur Selbstkontrolle
12
14
15
16
16
17
17
17
18
21
Grundlagen
22
2.1
2.1.1
2.1.2
2.2
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.3
2.3.1
2.3.2
2.3.3
2.3.4
2.4
2.5
2.6
2.7
22
Womit werden HTML-Seiten erstellt?
Adobe Brackets
WYSIWYG-Editoren
Woraus bestehen HTML-Dateien?
Tags
Das HTML-Grundgerüst
Verschachtelte Tags
Block- und Inline-Elemente
Attribute
Zeichenkodierung
Die Problematik unterschiedlicher Zeichenkodierungen
Sonderzeichen
Unicode
Maskierung reservierter Zeichen
Kommentare
Weitere wichtige Prinzipien
Webseiten testen
Fragen zur Selbstkontrolle
23
26
26
26
28
32
33
33
35
35
37
38
40
41
41
43
45
Einfache Textformatierung
46
3.1
3.2
3.2.1
3.2.2
3.2.3
3.2.4
3.3
46
Besonderheiten bei der Textformatierung mit HTML
Blockelemente
Absätze
Überschriften
Trennlinien
Weitere Blockelemente zur Strukturierung von Dokumenten
Inline-Elemente
46
46
47
47
48
49
3.3.1
3.3.2
3.3.3
3.4
3.4.1
3.4.2
3.4.3
3.4.4
3.5
4
5
6
7
Fettschrift
Kursivschnitt
Weitere Tags zur Textauszeichnung
Umbrüche und andere typographische Steuerzeichen
Zeilenumbrüche
Optionale Wortumbrüche
Bedingter Trennstrich
Geschütztes Leerzeichen
Fragen zur Selbstkontrolle
49
50
50
52
52
52
53
54
57
Listen und Aufzählungen
58
4.1
4.2
4.3
4.4
4.5
4.6
58
Punktlisten
Nummerierte Listen
Definitionslisten
Verschachtelte Listen
Ausklapp-Texte
Fragen zur Selbstkontrolle
59
59
60
60
62
Einbinden von Bildern
63
5.1
5.2
5.2.1
5.2.2
5.3
5.4
5.5
5.6
5.7
63
Funktionsweise und Dateiformate
Referenzierung
Relative Pfadangaben
Absolute Pfadangaben
Größenangaben
Alternativtext
Tooltips
Abbildungen mit Bildunterschrift
Fragen zur Selbstkontrolle
65
65
68
69
69
69
70
70
Hyperlinks
72
6.1
6.1.1
6.1.2
6.1.3
Einen Hyperlink definieren
Grundlagen
Relative Pfadangaben
Absolute Pfadangaben
72
6.1.4
6.1.5
6.1.6
6.2
6.2.1
6.2.2
6.3
6.4
Zielfenster definieren
Downloads
Der mailto-Link
Links zu bestimmten Stellen einer Webseite
Links zu einer Textstelle auf einer anderen Seite
Links zu einer Textstelle auf derselben Seite
Imagemaps
Fragen zur Selbstkontrolle
78
Tabellen
7.1
7.2
7.3
7.4
72
73
77
78
79
79
80
81
82
86
87
Was ist das Besondere an Tabellen in HTML?
Das Grundprinzip
Tabellenbeschriftung
Verbinden von Zellen
87
87
89
89
7.4.1
7.4.2
7.5
8
9
90
91
92
Formulare
93
8.1
8.2
8.3
8.4
8.5
8.6
8.7
8.8
8.9
8.9.1
8.9.2
8.10
8.11
8.11.1
8.11.2
8.11.3
8.11.4
8.12
8.13
8.14
8.15
8.16
8.17
8.17.1
8.17.2
8.17.3
8.18
8.19
93
Grundlagen
Festlegen des Ziels
Erzeugen einzelner Formularelemente
Einzeilige Texteingabefelder
Eindeutige Identifikation von Formularfeldern
Beschriftung von Formularfeldern
Mehrzeilige Eingabefelder
Auswahllisten
Kontrollfelder
Checkboxen
Radiobuttons
Datei-Upload
Buttons
Standard-Buttons
Reset-Button
Submit-Button
Moderne Buttons
Versteckte Felder in Formularen
Tastatursteuerung von Formularen
Autofocus
Deaktivieren von Formularelementen
Gruppieren von Formularfeldern
Neue Formularelemente in HTML5
Neue Eingabefelder
Suchvorschläge
Neue Interface-Elemente
Bearbeitbarer Inhalt
Fragen zur Selbstkontrolle
iFrames
9.1
9.2
9.3
10
Horizontale Verbindung von Zellen
Vertikale Verbindung von Zellen
Fragen zur Selbstkontrolle
94
94
95
96
97
98
99
102
103
103
104
106
106
106
107
107
108
108
109
109
109
111
111
112
114
115
116
118
Klassische Frames
Inline Frames
Fragen zur Selbstkontrolle
118
119
121
Einbinden von Video und Audio
122
10.1
10.1.1
10.1.2
10.1.3
10.2
10.2.1
10.2.2
122
Videos einbinden
Videos im Web
Browserunterstützung
Einbinden von Videos mit dem <video>-Tag
Für Interessierte: Videos mit Flash-Fallback einbinden mit MediaElement.js
Der <object>-Tag
MediaElement.js
122
123
126
129
129
130
10.3
10.4
11
12
Audiodateien einbinden
Fragen zur Selbstkontrolle
133
133
Meta-Tags
135
11.1
11.2
11.3
11.4
135
Allgemeine Syntax
Angaben für Suchmaschinen
Angaben für Browser
Fragen zur Selbstkontrolle
Anhang
12.1
136
136
138
139
Liste der wichtigsten HTML-Tags
139
Lösungen der Übungsaufgaben
144
Lösungen der Wissensfragen
145
Index
153
Vorwort
HTML is precisely what we were trying to prevent —
ever-breaking links, links going outward only, […] no
version management, no rights management.
Ted Nelson
Das World Wide Web ist ein weiterer Meilenstein in der Entwicklung menschlicher Kommunikationsstrukturen. Es hat am Ende des 20. Jahrunderts eine ähnliche Revolution ausgelöst
wie vor rund 500 Jahren die Gutenbergpresse: Praktisch jeder kann beliebige Informationen in
Form von Texten, Bildern, Animationen oder Videos im Web publizieren und damit die Tür zu
Millionen Menschen rund um den Globus öffnen. Auf Webseiten lassen sich Dienstleistungen
oder Produkte anbieten und verkaufen, Einzelpersonen können hier ihre Ideen präsentieren
oder Geschichten erzählen.
Die Grundlage dafür ist die Hypertext Markup Language (kurz HTML). HTML ist jedoch weit
mehr als nur eine weitere Technik zur Erstellung eindrucksvoller Dokumente. Die wesentliche
Bedeutung wird bereits im ersten Teil des Namens deutlich: Hypertext. HTML-Dokumente lassen sich mit anderen HTML-Dokumenten oder praktisch jeder Information im Internet verknüpfen. Dadurch entsteht ein weltweites Kommunikationsnetz, in dem nahezu jede Information jederzeit abrufbar (und jedes Produkt erhältlich) ist.
Ziel dieses Lernhefts ist es, Ihnen die grundlegenden Konzepte und Elemente von HTML zu
vermitteln und Ihnen Möglichkeiten zu zeigen, wie Sie diese Elemente für ein effektives Webdesign einsetzen können. Sie lernen, Texte übersichtlich zu strukturieren, Tabellen, Formulare
und Listen zu erstellen, Hyperlinks zu setzen sowie Bilder und Videos einzubinden. Besonderes Augenmerk wird dabei auf die zahlreichen Neuerungen von HTML5 gelegt.
Dieses Lernheft soll Ihnen dabei helfen, sich die »Philosophie« von HTML zu erschließen und
die Werkzeuge für den täglichen Gebrauch nutzbar zu machen. Nach der Durcharbeitung des
Lernhefts sollten Sie auch in der Lage sein, sich nach Bedarf zusätzliche Anwendungsmöglichkeiten selbst zu erarbeiten. Das sollten Sie auch tun, denn HTML entwickelt sich beständig
weiter.
Frank Schad
Nürnberg, im Februar 2015
122
10
10 Einbinden von Video und Audio
Einbinden von Video und Audio
In dieser Lektion lernen Sie:
➤ wie Sie Video- und Audiodateien in Ihr Dokument einbinden können.
10.1
Videos einbinden
10.1.1
Videos im Web
Eine der interessantesten und wohl meistgenutzten Neuerungen in HTML5 ist sicherlich die
Möglichkeit, Video-Dateien in HTML-Dokumente einzubinden. Zwar gibt es Videos im Web
nicht erst seit gestern, doch war dafür bisher ein Plug-in notwendig, d. h. die Besucher der
Website mussten sich Zusatzsoftware installieren, um die Videos ansehen zu können.
Und damit nicht genug: Videos können in unterschiedlichsten Formaten vorliegen (z. B. MP4,
Flash, QuickTime, Windows Media usw.), und da es keinen einheitlichen Standard gab, wurde
auch lange Zeit auf jeder Website ein anderes Format eingesetzt. Weil für nahezu jedes Format
ein eigenes Plug-in benötigt wird, haben sich im Lauf der Zeit unzählige Plug-ins auf den Festplatten der Benutzer angesammelt, um alle Videos im Web ansehen zu können. Dies kostete
natürlich Speicherplatz und Rechenleistung und war eine häufige Ursache für Konflikte und
Abstürze.
Zwar hat sich in den letzten Jahren das Adobe-Flash-Format zu einem Quasi-Standard für
Web-Videos entwickelt, sodass zumindest nur noch ein Plug-in installiert werden musste,
doch viele Nachteile blieben:
1. Wenn ein Benutzer das Plug-in nicht installiert hatte (weil er z. B. nicht wusste, wie das
geht, oder weil er nicht die nötigen Administrator-Rechte besaß), konnte er das Video
nicht sehen.
2. Flash ist eine proprietäre, kommerzielle Technologie der Fa. Adobe und dadurch von
deren Unternehmenspolitik abhängig.
3. Dadurch widerspricht Flash dem Grundsatz des W3C, nur offene Standards zu verwenden.
4. Flash ist äußerst ressourcenhungrig und eine häufige Ursache für Systemabstürze.
5. Flash läuft nicht auf Apple-Mobilgeräten (iPhone, iPad) und demnächst auch nicht mehr
auf anderen Mobilgeräten, da Adobe den Flash-Support dafür eingestellt hat.
Mit HTML5 nun ist es möglich, Videos ähnlich wie Bilder in eine Webseite einzubinden, ohne
dass dafür ein Plug-in benötigt wird. Die Browser sind nun selbst in der Lage, die Videos abzuspielen. Doch sind damit noch nicht alle Probleme gelöst: Es gibt nämlich noch immer keinen
einheitlichen Standard, in welchem Dateiformat die Videos vorliegen müssen.
10.1 Videos einbinden
10.1.2
123
Browserunterstützung
Momentan haben sich aus der Vielzahl an Möglichkeiten zumindest zwei konkurrierende Formate herauskristallisiert: MP4 und Googles neues Format WebM. Ein drittes Format, OGV, ist
zwar mittlerweile aus dem Rennen, kann aber aus Kompatibilitätsgründen mit etwas älteren
Browsern noch dazugezählt werden. Jedes Video, das Sie in eine Webseite einbinden wollen,
muss momentan mindestens in den Formaten MP4 und WebM vorliegen, d. h. Sie müssen
jedes Video mindestens zweimal ins Web stellen! Jeder Browser wählt dann automatisch das
Format, das er abspielen kann. Es gibt z. Z. kein Format, das alle Browser abspielen können.
Nachfolgend ein Überblick:
Browser
MP4
IE 9+
WebM
OGV
Anmerkungen
* nur, wenn der VP8-Codec installiert ist.
IE9 unterstützt ansonsten keine anderen Codecs
von Drittherstellern (im Gegensatz zu Safari, der alle
Formate abspielt, die QuickTime unterstützt).
*
Firefox
3.5, 3.6
—
Firefox 4+
—
Safari 3.1+
*
*
*
* spielt alle Formate ab, die QuickTime unterstützt
(kann durch zusätzliche QuickTime-Components
erweitert werden)
Chrome 3,
4, 5
—
Chrome
6+
—
Opera
10.5
—
Opera
10.6+
—
Konqueror
4.4+
—
Tabelle 10.1 Browserunterstützung der HTML5-Videoformate (Quelle: docs.sublimevideo.net/supported-browsers-andplatforms)
Andere Formate, wie z. B. Flash-Videos, können nicht mit dem <video>-Tag in
HTML5-Dokumente eingebunden werden!
124
10 Einbinden von Video und Audio
Formate und Codecs
Bevor wir uns jedoch mit der Einbindung dieser drei Video-Formate in HTML-Seiten beschäftigen können, benötigen wir ein wenig Hintergrundwissen darüber, wie Videodateien aufgebaut sind.
Eine Videodatei besteht i. d. R. aus Bild und Ton, also einer Video- und einer Audiospur. Um
die Dateigröße beider Spuren zu reduzieren (und das ist auch heute noch zwingend notwendig), müssen bestimmte Kompressions- oder Kodierungsverfahren eingesetzt werden. Dies
geschieht für Audio- und Videospur i. d. R. getrennt! Beim Abspielen des Videos muss der
Browser dieselben Verfahren zur Dekompression nutzen. Deshalb werden diese Verfahren
Codecs (Einzahl Codec, Kurzform für Coder/Decoder) genannt.
Damit nun aber Bild und Ton immer gemeinsam und synchron abgespielt werden, werden
beide zusammen in eine sogenannte Container-Datei (engl. Behälter) gepackt. Diese
Container-Datei ist das, was man gemeinhin als Video-Datei bezeichnet, und trägt Endungen
wie .mp4, .mov, .flv, .wmv usw.
In anderen Worten: Eine Video-Datei ist lediglich das Containerformat, das zwei unterschiedlich kodierte Elemente enthält:
Abb. 10.1 Schematische Darstellung des Aufbaus einer Videodatei: Im Containerformat liegen die Video- und die
Audio-Spur, die mit unterschiedlichen Codecs komprimiert sein können.
Bei vielen (aber nicht allen) Containerformaten ist vorgegeben, in welchen Codecs die enthaltenen Video- und Audiospuren vorliegen müssen, bei anderen bestehen gewisse Auswahlmöglichkeiten. Folgende Tabelle verschafft einen kleinen Überblick über die in HTML5 möglichen Dateiformate und Codecs:
Containerformat/
Dateiendung
enthaltener
Video-Codec
enthaltener
Audio-Codec
MPEG-4 / .mp4
H.264 (= MPEG-4 AVC)
AAC (= MPEG-4 Audio)
WebM / .webm
VP8
Vorbis
OGV, OGG / .ogv
Theora
Vorbis
Tabelle 10.2 Überblick über in HTML5 mögliche Videoformate und Codecs (Stand April 2014)
10.1 Videos einbinden
125
Das bedeutet z. B., dass Sie keine MP4-Dateien in Webseiten einbinden können, deren Videospur mit einem anderen als dem H.264-Codec kodiert ist (in der Praxis ist dies aber zum Glück
meist der Fall).
Ob Ihr Video, sofern es in einem geeigneten Format vorliegt, auch die passenden Codecs enthält, können Sie in den meisten Video-Abspielprogrammen überprüfen. Öffnen Sie Ihr Video
z. B. im QuickTime-Player und wählen Sie dann im Menü Fenster → Filminformationen einblenden oder drücken Sie auf der Tastatur Strg-I (Windows) bzw. -I (Mac). Daraufhin öffnet
sich ein kleines Fenster mit allerlei nützlichen Infos. Dort finden Sie u. a. die Bildgröße sowie
die verwendeten Codecs. (Das in den folgenden Beispielen verwendete Video bunny.mp4 finden Sie im Begleitmaterial zu diesem Lernheft im Ordner videos_einbinden.)
Abb. 10.2 Im Info-Fenster des QuickTime-Players finden Sie unter »Format« die verwendeten Codecs (hier AAC-Audio
und H.264-Video). Unter »Normale Größe« finden Sie die Abmessungen des Videos.
Videos konvertieren
Um Ihr Video in die benötigten Formate mit den passenden Codecs zu konvertieren, benötigen Sie entsprechende Konverter-Software. Davon gibt es eine ganze Menge im Web in unterschiedlicher Qualität und zu (sehr) unterschiedlichen Preisen.
Eine erste Anlaufstelle wäre der Adobe Media Encoder, der in vielen Creative-Suite- bzw.
Creative-Cloud-Paketen enthalten ist und automatisch mitinstalliert wird, doch kann dieser —
wie die meisten anderen Konverter auch — z. Z. noch nicht in das WebM-Format konvertieren
(obwohl Adobe seine Unterstützung für dieses Format schon vor längerer Zeit offiziell angekündigt hat).
Eine günstige und sehr flexible Möglichkeit ist die Pro-Variante des QuickTime-Players 7
(30,– € im Apple-Store, auch für Windows erhältlich), die mit Hilfe sogenannter — meist kostenloser — Components beliebig um zusätzliche Formate und Codecs erweitert werden kann.
Für den Anfang empfehle ich den kostenlosen Miro Video Converter (Mac und Windows,
www.mirovideoconverter.com). Nachteil: Dieser Konverter erlaubt — bis auf die Bildgröße —
keinerlei Einstellungen bzgl. Datenrate, Framerate, Qualität usw., d. h. Ihr Ausgangsmaterial
sollte bereits über die richtigen Eigenschaften verfügen.
126
10 Einbinden von Video und Audio
Abb. 10.3 Links: Auswahl des WebM-Formats im Miro Video Converter über den Button »Format« (SD steht für
»Standard Definition« für Videos in Standardgröße, HD für »High Definition« für hochauflösende Videos). Direkt
darunter das Format MP4, danach das OGV-Format (»Ogg Theora«). Rechts: Durch Klick auf die Schaltfläche mit dem
Zahnrad können Sie die Bildgröße anpassen (»Custom Size«).
Im Gegensatz zu Bildern spielt die Dateigröße bei Videos keine Rolle, da die Videos nicht
komplett heruntergeladen werden müssen, bevor man sie ansehen kann (diesen Vorgang nennt man Streaming). Wichtig ist stattdessen die Datenrate, die Sie ebenfalls im
Infofenster des QuickTime-Players ablesen können (s. o.) und beim Exportieren/Konvertieren des Videos einstellen sollten. Dieser Wert bestimmt letztlich, wie schnell die Internetverbindung des Anwenders mindestens sein muss, um das Video ruckelfrei abspielen
zu können.
Je niedriger die Datenrate, desto schlechter ist aber auch die Qualität des Videos. Sinnvolle Werte für Videos in Standard-Webgrößen (ca. 720 × 400 px) sind etwa 500–1.500
kBit/s, abhängig vom Inhalt: Videos, die viel Bewegung und viele Details enthalten (wie
etwa ein Fußballspiel), benötigen höhere Datenraten, während z. B. ein Nachrichtensprecher, der sich kaum bewegt, mit einer wesentlich niedrigeren Datenrate auskommt. Im
Zweifelsfall heißt es hier: ausprobieren!
10.1.3
Einbinden von Videos mit dem <video>-Tag
Liegen Ihre Videos in den drei benötigten Formaten vor, ist die Einbindung in HTML ein leichtes: Sie benötigen dazu den Tag <video> , der mit </video> auch separat wieder geschlossen werden muss. Im Video-Tag müssen Sie die Abmessungen des Videos mit den Attributen
width und height (in Pixeln) angeben:
<video width="720" height="300"></video>
Theoretisch wäre hier — wie bei Bildern — auch das Attribut src möglich, doch könnten Sie
damit nur eine Videodatei referenzieren, z. B.
<video width="720" height="300" src="bunny.mp4"></video>
10.1 Videos einbinden
127
Um Alternativen anzugeben, müssen Sie anders vorgehen: Innerhalb des Tag-Paares
<video></video> ist die Angabe des Tags <source /> möglich. Dieser Tag ist ein
Standalone-Tag und kann beliebig häufig wiederholt werden. In jedem dieser Tags können Sie
— wieder mit dem Attribut src — eine andere Variante Ihres Videos referenzieren:
<video width="720" height="300">
<source src="bunny.mp4" />
<source src="bunny.webm" />
<source src="bunny.ogv" />
</video>
Zusätzlich sollten Sie mit dem Attribut type den MIME-Typ (vgl. Tabelle 8.1) des jeweiligen
Videos angeben. Das kann den Browser bei der Auswahl des korrekten Formats unterstützen:
<video width="720" height="300">
<source src="bunny.mp4" type="video/mp4" />
<source src="bunny.webm" type="video/webm" />
<source src="bunny.ogv" type="video/ogg" />
</video>
Steuerleiste einblenden
Damit wäre die grundlegende Einbindung bereits fertig. Das Problem: Es gibt keine Möglichkeit, das Video abzuspielen. Dazu benötigt der einleitende <video> -Tag noch mindestens ein
weiteres Attribut.
Mit dem Attribut controls können Sie die Standard-Steuerleiste des Videos einblenden, die
u. a. auch über einen Play-Button verfügt:
<video width="720" height="300" controls>
Das Attribut controls ist ein boole’sches Attribut, d. h. wenn das Attribut vorhanden ist, wird die
Steuerleiste angezeigt, ansonsten nicht. Alternativ kann das Attribut auch wieder ausgeschrieben werden (vgl. Abschnitt 2.2.5):
<video width="720" height="300" controls="controls">
Diese Steuerleiste wird vom Browser zur Verfügung gestellt und sieht in jedem Browser anders
aus.
Video automatisch abspielen und wiederholen
Zusätzlich (oder alternativ dazu) können Sie mit dem Attribut autoplay bestimmen, dass das
Video von alleine abgespielt wird.
<video width="720" height="300" controls autoplay>
Dieses Attribut sollten Sie aber nur in begründeten Fällen verwenden, da Sie damit den Besuchern Ihrer Website durchaus auf die Nerven fallen oder diese sogar erschrecken können.
Zudem können dadurch zusätzliche Kosten für den Benutzer anfallen (z. B. bei Volumentarifen
für Mobilverbindungen), obwohl er das Video vielleicht gar nicht sehen möchte. Aus diesem
Grund wird das Attribut autoplay auf dem iPhone und dem iPad ignoriert.
128
10 Einbinden von Video und Audio
Ähnliches gilt für das Attribut loop, das Ihr Video in einer Endlosschleife abspielt:
<video width="720" height="300" controls loop>
Startbild festlegen
Interessant dagegen ist die Eigenschaft poster, mit der Sie ein sogenanntes Posterframe — also
ein Start- oder Titelbild — festlegen können. Das Posterframe wird dann angezeigt, wenn das
Video (noch) nicht spielt, und kann ein beliebiges Pixelbild in einem der drei Web-Bildformate
sein (JPEG, PNG oder GIF). Geeignet dafür sind z. B. eine besonders prägnante Szene aus dem
Video selbst oder aber Ihr Firmenlogo o. ä. Sie müssen lediglich darauf achten, dass das Posterframe dieselben Abmessungen wie das Video hat. Als Wert weisen Sie dem Attribut wie
gewohnt den Pfad zu dem Bild zu:
<video width="720" height="300" controls poster="bilder/bunny.jpg">
Video vorausladen
Zusätzlich besteht die Möglichkeit, mit dem Attribut preload das Video bereits beim Laden der
Seite vorauszuladen, noch bevor es abgespielt wird. Mögliche Werte wären auto (das gesamte
Video wird vorausgeladen), metadata (nur die Meta-Informationen des Videos werden vorausgeladen) und none (das Video wird nicht vorausgeladen). In der Praxis sollten Sie diesen Wert
jedoch aus o. g. Gründen (zusätzliche Kosten für den Benutzer) i. d. R. auf none setzen:
<video width="720" height="300" controls preload="none">
In bestimmten Fällen jedoch können Browser dieses Attribut ignorieren und anders entscheiden.
Alternativinhalt angeben
Für Browser, die den HTML5-Video-Tag noch nicht kennen, können (und sollten) Sie Alternativinhalte zur Verfügung stellen. Dies kann z. B. ein Hinweistext und/oder ein Screenshot
des Videos sein, aber auch nochmals das Video selbst z. B. im Flash-Format (vgl. Abschnitt
10.2). Der Alternativinhalt wird mit beliebigen HTML-Tags innerhalb des Video-Elements
nach dem letzten <source> -Tag angegeben und nur angezeigt, wenn der Browser den
<video> -Tag nicht kennt:
<video width="720" height="300" controls poster="bilder/bunny.jpg">
<source src="bunny.mp4" type="video/mp4" />
<source src="bunny.webm" type="video/webm" />
<source src="bunny.ogv" type="video/ogg" />
<img src="bilder/bunny.jpg" alt="Bunny" />
</video>
Übung 9:
Binden Sie das Video 1984.mov aus dem Begleitmaterial (Ordner videos_einbinden) in ein
HTML-Dokument ein.
10.2 Für Interessierte: Videos mit Flash-Fallback einbinden mit MediaElement.js
129
1. Konvertieren Sie das Video mit dem Miro Video Converter (oder einem Konvertierungsprogramm Ihrer Wahl) in die drei Formate MP4, WebM und OGV.
2. Erstellen Sie ein neues HTML-Dokument aus Ihrer vorlage.html und notieren Sie darin
den <video>-Tag, der alle drei Videos einbindet. Vergeben Sie folgende Eigenschaften:
➤ Die Steuerleiste soll angezeigt werden.
➤ Ein Posterframe soll angezeigt werden.
➤ Als Alternativinhalt soll ein Bild angezeigt werden (dies kann dasselbe Bild wie
das Posterframe sein).
➤ Das Video soll nicht vorausgeladen werden.
➤ Das Video soll nicht von alleine starten und nicht in einer Endlosschleife abgespielt werden.
10.2
Für Interessierte: Videos mit Flash-Fallback einbinden
mit MediaElement.js
Dieser Abschnitt ist nicht Bestandteil der Webmasters-Europe-Zertifikatsprüfung, sondern ist nur als Zusatzinformation für Interessierte gedacht.
Nicht alle Anwender haben bereits einen HTML5-fähigen Browser. Damit auch diese Anwender unsere Videos sehen können, empfiehlt es sich, ein sogenanntes Flash-Fallback einzubinden. Dadurch wird automatisch eine Flash-Version des Videos angezeigt, wenn der Browser
den HTML5-Video-Tag nicht kennt. In diesem Fall benötigt der Benutzer natürlich das FlashPlug-in.
Der Vorteil dabei: Sie müssen Ihr Video nicht nochmals in ein viertes Format konvertieren, da
der Flash-Player auch MP4-Videos abspielen kann. Der Nachteil: Das Video kann nicht direkt
in HTML eingebunden werden, sondern muss zunächst in eine Flash-Datei (Dateiendung .swf )
eingebettet werden, die die Steuerung des Videos ermöglicht. Diese wird dann ihrerseits in
HTML eingebunden.
10.2.1
Der <object>-Tag
Flash-Dateien (und auch alle anderen Dateien, die ein Plug-in benötigen) werden nach dem
W3C-Standard mit dem Tag <object> eingebunden. Theoretisch könnten wir diesen Tag —
vorausgesetzt, wir hätten bereits eine SWF-Datei — also einfach als Alternativinhalt innerhalb
des Video-Tags platzieren (siehe oben):
<video width="720" height="300" controls poster="bilder/bunny.jpg">
<source src="bunny.mp4" type="video/mp4" />
<source src="bunny.webm" type="video/webm" />
<source src="bunny.ogv" type="video/ogg" />
<object data="bunny.swf" width="720" height="300"></object>
</video>
130
10.2.2
10 Einbinden von Video und Audio
MediaElement.js
Der <object> -Tag hat jedoch aufgrund der enormen Unterschiede zwischen den Browsern
und den verschiedenen Plug-ins noch nie sauber funktioniert, weshalb an dieser Stelle auch
nicht näher darauf eingegangen werden soll. Deshalb werden in der Praxis Flash-Videos nicht
mit HTML, sondern dynamisch mit Hilfe von JavaScript eingebunden. Der <object> -Tag
wird in diesem Fall mit den für die jeweilige Browserversion passenden Parametern automatisch generiert. Zu diesem Zweck haben sich mittlerweile fertige Lösungen etabliert. Eine der
besten ist das kostenlose MediaElement.js, das Sie sich unter mediaelementjs.com herunterladen können:
Die heruntergeladene ZIP-Datei enthält eine Menge Dateien. Benötigt werden davon nur die
aus dem Ordner build. Dieser enthält — neben den JavaScript-Dateien — u. a. die bereits
erwähnte Flash-Datei (flashmediaelement.swf), die zur Anzeige des MP4-Videos im FlashPlayer benötigt wird. Daneben gibt es auch noch eine Reihe von CSS-Dateien und Bildern, die
das Erscheinungsbild der Steuerleiste in den unterschiedlichen Browsern vereinheitlichen.
Von den JavaScript- und CSS-Dateien gibt es jeweils zwei Varianten: je eine mit der Endung js
bzw. css und eine mit der Endung min.js bzw. min.css. Diese Dateien sind jeweils identisch, mit
dem Unterschied, dass die min-Varianten komprimiert sind, um Ladezeit zu sparen (min steht
für minified). Sie benötigen nur jeweils eine der beiden Varianten.
Alle anderen Dateien aus dem Ordner build sind Bestandteil Ihres Projektes und müssen
zusammen mit der HTML-Datei und den Videos auf den Webserver hochgeladen werden! Am
besten legen Sie sie in einen Unterordner namens mediaelement o. ä. Ihre Verzeichnisstruktur
sollte nun so aussehen:
10.2 Für Interessierte: Videos mit Flash-Fallback einbinden mit MediaElement.js
131
Abb. 10.4 Verzeichnisstruktur inklusive MediaElement
Video-Tag notieren
In der HTML-Datei notieren Sie zunächst wie gewohnt Ihren <video> -Tag (der <object> Tag wird nicht benötigt, dieser wird ja mit JavaScript automatisch erzeugt):
<video width="720" height="300" controls poster="bilder/bunny.jpg"
preload="none">
<source src="bunny.mp4" type="video/mp4" />
<source src="bunny.webm" type="video/webm" />
<source src="bunny.ogv" type="video/ogg" />
<img src="bilder/bunny.jpg" alt="Bunny" />
</video>
JavaScript- und CSS-Dateien im head referenzieren
Als nächstes müssen Sie im <head> der HTML-Datei — am besten nach dem <title> Tag — die CSS-Datei mediaelementplayer.css sowie die JavaScript-Dateien jquery.js und
mediaelement-and-player.js (in dieser Reihenfolge!) einbinden, damit sie vom Browser geladen
werden, wenn die HTML-Seite angezeigt wird:
<head>
<meta charset="utf-8" />
<title>Video mit Flash-Fallback</title>
132
10 Einbinden von Video und Audio
<link rel="stylesheet" type="text/css" href="mediaelement/
mediaelementplayer.css" />
<script type="text/javascript" src="mediaelement/jquery.js"></script>
<script type="text/javascript" src="mediaelement/
mediaelement-and-player.js"></script>
</head>
MediaElement aufrufen
Als letztes notieren Sie im <head> folgenden JavaScript-Code (Sie finden den gesamten
Code auch im Begleitmaterial zu diesem Lernheft in der Datei flash_fallback.html im Ordner
videos_einbinden):
<head>
<meta charset="utf-8" />
<title>Video mit Flash-Fallback</title>
<link rel="stylesheet" type="text/css" href="mediaelement/
mediaelementplayer.css" />
<script type="text/javascript" src="mediaelement/jquery.js"></script>
<script type="text/javascript" src="mediaelement/
mediaelement-and-player.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("video").mediaelementplayer({
startVolume
startVolume: 0.8,
hideVideoControlsOnLoad
hideVideoControlsOnLoad: true
});
});
</script>
</head>
Dieser Code weist das MediaElement-Script an, alle auf der Seite eingebundenen Videos zu
steuern und gegebenenfalls mit Flash abzuspielen. Dabei können Sie eine ganze Menge an
Optionen angeben. Zwei davon sind hier beispielhaft angegeben: startVolume legt fest, mit
welcher Anfangslautstärke das Video abgespielt werden soll (hier 0.8, also 80%). hideVideoControlsOnLoad: true verbirgt die Steuerleiste zu Beginn. Sie wird dann erst beim Überfahren
des Videos mit der Maus angezeigt. Die gesamte Liste der möglichen Optionen finden Sie auf
der Website des MediaElement-Players.
Fertig. Wie erwähnt ersetzt der MediaElement-Player auch die Standard-Steuerleiste des Browsers, sodass sie in jedem Browser gleich aussieht. Mit CSS können Sie das Erscheinungsbild
dieser Steuerleiste komplett verändern!
Abb. 10.5 So sollte Ihr Video nun aussehen