Webgestaltung

Google Web Designer: Videos einbinden mit HTML5

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video.

HTML 5

© World Wide Web Consortium (W3C)

Google Web Designer ermöglicht das einfache Einbinden von Videos.

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.

Google Web Designer

© Weka Screenshot

So generieren Sie das HTML5-video-Element in der WYSIWYG-Umgebung.

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. 

Mehr zum Thema

Wordpress: Wir helfen bei der Installation und Anpassung von Themes.
Themes installieren & anpassen

Themes sind Baukästen für jedes WordPress-Blog. Sie bestehen vor allem aus Templates und Stylesheets, die das Gerüst bieten für individualisierte…
Google Web Designer
Webgestaltung

Der Google Webdesigner wartet mit einem großen Leistungsumfang, ausgezeichneter Bedienung und vielen interaktiven Features auf.
Google Chrome
Werbung blockieren, Office & Co.

Wir haben die besten Tipps und Tools für Google Chrome, damit Sie Werbung ausblenden, Office im Browser nutzen können und mehr.
Symbolbild: Sicherheit
Android-Virenscanner

Ist ein Virenscanner für das Android-Tablet notwendig? Definitiv, ja! Wir zeigen die besten Antiviren-Apps, damit Sie sicher vor Viren und Trojaner…
Kalender synchronisiert auf iPad
Zeit-Management

Kalender auf dem Smartphone, PC und im Web synchronisieren - mit unseren 9 Tipps schaffen Sie genau das. Verpassen Sie keinen Termin mehr!