Google Web Designer: Videos einbinden mit HTML5

Browser sind mit HTML5 nicht mehr auf Flash angewiesen, sondern spielen das Video selbst ab. Wir zeigen Ihnen Schritt für Schritt, wie die Video-Einbindung funktioniert.

1. Neue Datei anlegen

Legen Sie eine leere HTML-Datei über Datei/Neue Datei an (für Ads stehen zum Einbinden von Videos spezielle Komponenten zur Verfügung)

2. Video-Tag erstellen

Rufen Sie die Designansicht auf, indem Sie unterhalb des Arbeitsbereichs auf den entsprechenden Button klicken. In der Designansicht lassen Sie das HTML5-video-Tag erstellen, indem Sie in der linken Tool-Leiste auf das Tag-Tool und anschließend in der oberen Leiste mit den Tool-Optionen auf das Video-Element-Symbol klicken.

3. Video platzieren

Zeichnen Sie nun auf der Arbeitsfläche, beginnend mit der linken oberen Ecke, die Fläche, auf der Sie das Video platzieren wollen. Sie können die Ausmaße nachträglich jederzeit ändern, indem Sie im Bereich Eigenschaften für die Breite und Höhe neue Werte setzen. 

4. Attribute anpassen

Ab jetzt geht es im HTML-Code weiter. Klicken Sie unten auf die Schaltfläche Codeansicht, um den HTML-Quellcode zu sehen. Google Web Designer hat das Element <video class="gwd-video-n2nq"></video> und das referenzierte Style Sheet mit der Einstellung position: absolute; und den gewählten Positions- und Größenangaben generiert. Fügen Sie dem video-Tag das Attribut src hinzu. Als Wert geben Sie den Pfad zur Videodatei an. Den MIME-Typen geben Sie mit dem type- Attribut an. Mit dem Attribut autoplay legen Sie fest, dass das Video nach dem Laden der Webseite automatisch abgespielt wird.

Durch Angabe von controls, das wie autoplay ohne Wertzuweisung notiert wird, können Sie für den Player die üblichen Bedienelemente anzeigen. <video class="gwd-video-n2nq" src="video.mp4" type="video/mp4" autoplay controls></video> Daneben gibt es noch weitere Attribute, die die Wiedergabe des Videos beeinflussen. Mit loop veranlassen Sie, dass das Video wiederholt abgespielt wird, muted spielt das Video ohne Ton ab. Wenn Sie das Attribut preload angeben, wird das

5. Weitere Attribute

Wenn Sie das Video nicht automatisch abspielen lassen, möchten Sie vielleicht eine Vorschau definieren. Standardmäßig wird nämlich immer das erste Bild des Videos angezeigt, das im ungünstigen Fall aus einer schwarzen Fläche bestehen kann. Notieren Sie im einleitenden video-Tag gegebenenfalls das Attribut poster und weisen Sie diesem den Link zur Bilddatei zu, die das gewünschte Vorschaubild enthält (<video ... controls poster="videovorschau. jpg" ...>).

6. Mehr Formate

Sie können mit dem video-Element beliebig viele Formate anbieten, sodass sich ein Browser das Format aussuchen kann, mit dem er am besten zurechtkommt:

<video class="gwd-video-n2nq" auto play controls poster="videovorschau.jpg>

<source src="video.mp4" type="video/mp4" />

<source src="video.ogg" type="video/ogg" />

<source src="video.m4v" type="video/x-m4v" /> </video>

M4V ist das Format für iPad und iPhone. Der entsprechende MIME-Type lautet video/x-m4v.