Webgestaltung

Google Web Designer: Videos einbinden mit HTML5

28.2.2014 von Walter Saumweber

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

ca. 2:05 Min
Ratgeber
VG Wort Pixel
HTML 5
Google Web Designer ermöglicht das einfache Einbinden von Videos.
© World Wide Web Consortium (W3C)

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
So generieren Sie das HTML5-video-Element in der WYSIWYG-Umgebung.
© Weka Screenshot

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

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

Themes installieren & anpassen

WordPress-Themes - der große Ratgeber mit Tipps und Tricks

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

Kostenloser Webdesigner-Editor von Google

Der Google Webdesigner wartet mit einem großen Leistungsumfang, ausgezeichneter Bedienung und vielen interaktiven Features auf.

Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1

Programme richtig installieren

Benutzerrechte unter Windows 8.1

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.

Google Chrome

Werbung blockieren, Office & Co.

Chrome - 7 Tipps & Tricks für den Google-Browser

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

Filme auf PC

Anleitung

Film kopieren: Stream, Blu-ray oder DVD - so geht's

Ob Stream, Video-DVD oder Blu-ray - mit den passenden Tools lassen sich Filme im Handumdrehen kopieren. Wir zeigen, wie.