Die Verwendung von HTML5-Video ist unglaublich einfach in Dreamweaver CC.
Ich arbeite mit dem Dokument „index.html“ im Ordner „Chapter 8“ in den Beispieldateien.
Als Erstes scrolle ich nach unten zur Mitte des Dokuments.
Unterhalb des Blogposts klicke ich und erhalte einen blinkenden Cursor.
An dieser Stelle möchte ich HTML5-Video einfügen.
Für diesen Vorgang gibt es mehrere Optionen.
Im Bedienfeld „Einfügen“ (Insert) unter der Kategorie „Medien“ (Media) gibt es den Button „HTML5 Video“.
Unter der Kategorie „Allgemein“ (Common) gibt es dieselbe Option für HTML5-Video.
Im Menü „Einfügen“ (Insert) kann ich ebenfalls „HTML5 Video“ auswählen.
Oder ich verknote mir die Finger auf der Tastatur mit dieser Tastenkombination.
Sobald ich eine dieser Optionen auswähle, wird ein Videoplatzhalter im Dokument platziert.
Ich wechsle zur Ansicht „Teilen“ (Split).
Jetzt sehen Sie, dass einfach nur ein Videoelement hinzugefügt wurde inklusive Attribut für die Videosteuerungen.
Das Attribut wurde automatisch angewendet.
Falls es nicht angewendet werden soll, deaktivieren Sie diese Option im Bedienfeld „Eigenschaften“ (Properties).
Adobe hat alle relevanten Optionen für Video im Eigenschaften-Bedienfeld zusammengestellt.
Auf diese Weise können Sie visuell arbeiten.
Falls ich eine ID oder Klasse (Class) habe, die ich diesem Videoobjekt zuordnen möchte, kann ich sie hier zuordnen.
Zuerst kümmere ich mich aber um das wahrscheinlich wichtigste Attribut, nämlich die Quelle (Source).
Das ist der Speicherort der Videodatei, die hier abgespielt werden soll.
Dazu klicke ich auf das Ordnersymbol rechts neben dem Textfeld.
Damit öffne ich das Dialogfeld „Video auswählen“ (Select Video).
In meinem Verzeichnis habe ich einen Ordner namens „html5-video“.
Darin stehen Videos in drei Formaten.
Diese drei Videoformate sind erforderlich, um ein konsistentes Erlebnis in allen Browsern zu gewährleisten.
Für diese Übung wähle ich die Datei „bentley.mp4“.
Es gibt noch eine OGV- und eine WEBM-Datei mit demselben Namen wie die MPEG4-Datei.
Dann klicke ich auf „OK“ (Windows) bzw.
„Öffnen“ (Open) auf dem Mac.
Damit werden nicht nur die Quelle (Source) befüllt, sondern auch die alternativen Quellen 1 und 2 (Alt Source 1/Alt Source 2), weil mehrere Dateien mit demselben Namen und unterschiedlichen Erweiterungen für die verschiedenen Formate vorliegen.
Außerdem wird der Code entsprechend aktualisiert.
Jetzt fehlen nur noch die Breite und die Höhe.
Falls Breite und Höhe nicht bekannt sind, muss man sie herausfinden.
Oft kann man sich dazu an einem Posterframe orientieren.
Ein Posterframe ist ein Standbild, das einen Hinweis auf den Inhalt des Videos gibt.
Der Posterframe sollte dieselben Abmessungen haben wie das Video.
Ich habe bereits ein passendes Standbild erstellt.
Also klicke ich auf das Ordnersymbol rechts neben dem Textfeld.
Im gleichen Verzeichnis wie die Videos steht die Datei „poster.png“.
Ich wähle sie aus.
Die Abmessungen sind 426 x 240.
Wenn ich die Datei öffne, werden Breite und Höhe mit diesen Abmessungen befüllt.
Es gibt noch weitere Optionen links unten.
Hier sind die bereits erwähnten Videosteuerungen (Controls).
Mit „Loop“ wird das Video nach der Wiedergabe immer wieder von vorne abgespielt.
Das Video kann auch automatisch abgespielt werden.
Das ist im Allgemeinen nicht zu empfehlen.
Automatisch abgespielte Videos auf Web-Seiten werden als unangenehm empfunden.
Wenn Sie diese Option auswählen, empfehle ich, auch „Muted“ zu aktivieren, damit wenigstens kein Ton zu hören ist.
Das Video wird zwar abgespielt, lenkt aber nicht so sehr ab, weil nichts zu hören ist.
Ich lasse beide Optionen deaktiviert.
Dann gibt es das Menü „Preload“.
Die Standardeinstellung ist „none“.
Das Preload-Attribut ist dem Videoelement allerdings nicht zugeordnet.
Wenn „none“ als Preload-Attribut zugewiesen werden soll, müssen Sie erst eine der anderen Optionen auswählen und dann wieder „none“.
Ist „none“ ausgewählt, findet kein Preload statt.
Das ist in der Regel nicht ideal.
Sie sollten mindestens „metadata“ wählen.
Damit werden Informationen wie Dauer und Abmessungen des Videoinhalts vorab geladen.
Dann hat der Endanwender einen besseren Eindruck davon, was vom Video zu erwarten ist.
Mit „auto“ bestimmt der Browser, ob Inhalte vorab geladen werden oder nicht.
Ich wähle „metadata“.
Das sind die grundlegenden Attribute.
Später sehen wir uns die Eigenschaft „Flash-Reserve“ (Flash Fallback) an.
Aber zuvor wechsle ich zur Ansicht „Entwurf“ (Design) und dann zur „Live-Ansicht“.
Nach Auswahl der Live-Ansicht müsste das Video in Dreamweaver CC korrekt gerendert werden.
Dann erhalte ich eine Vorschau.
Wenn ich auf den Wiedergabe-Button klicke, wird das Video tatsächlich abgespielt.
Ich empfehle Ihnen, Ihre Seite in verschiedenen Browsern zu testen – Firefox, Chrome und Internet Explorer –, um sicherzugehen, dass das Ergebnis Ihren Vorstellungen entspricht.
Aber Sie wissen jetzt: Mit diesen Funktionen von Dreamweaver CC ist das Einfügen von HTML5-Video unglaublich einfach.
