Einbinden von Videos

Logo

 

Im Zeitalter von Youtube und Co. sind eine ungezählte Zahl von Videos im Internet zu sehen. Lustige, Gute, und ganz schlechte.

 

Aber wie sieht es mit eigenen Videos aus.

Gewerbetreibende können diese Möglichkeit nutzen Ihr Unternehmen genauer und besser vorzustellen oder Produktionsabläufe näher erklären.

Privat-Personen können diese Möglichkeit nutzen um sich zu bewerben, damit man das Video nicht auf Youtube sehen kann oder sollte.

Wie immer fordern die Götter ein wenig Schweiß um diese Möglichkeit zu nutzen.Mit der Einführung von HTML5 ist allerdings erheblich leichter geworden.

Grundsätzlich genügen die neuen HTML-Tags <video und </video>.Zwischen diese beiden Tags wird dann noch der Name des Videos eingefügt und zwar wie folgt:

Hinweis :

Damit das Video auch responsiv ist, also auch mobilen Endgeräte im richtigen Format zu sehen ist, gehört in den Head-Bereich der HTML-Seite folgender Meta-Tag :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

Das bedingt allerdings das das Video auch 2 x auf dem Server sein muß. Verschönern kann man den <video tag> mit den folgenden Attributen :

Hier beispielhaft wie das untere Video auf dieser Seite eingebunden ist :

Im Head-Bereich folgender Meta-Tag :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Im Bodybereich

<video poster="video/bild.jpg" controls preload autobuffer>

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

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

</video>

 

Das hier eingebaute Video stammt aus einer Beispieldatei von Adobe

 

Zum besseren Verständnis biete ich eine komplette Beispielseite mit allen Dateien zum Download an