Flern => Neben der Fotografie => HTML 5 Videos auf eigener Webseite

Hallo Zusammen,

ich will euch heute mal einen sehr einfachen Kniff zeigen, wie ihr ein Video auf eure Webseite stellt. Das ganze ist mit sehr wenig Aufwand und ohne externe Plattformen, wie Youtube oder Vimeo, möglich. Wenn jetzt jemand denkt “programmieren kann ich eh nicht” lest bis zum Ende und entscheidet selbst.

Warum man Videos nicht über externe Plattformen bereit stellen sollte.

Die meisten Webseitenbetreiber stellen ihre Videos über einen Plug-In zur Verfügung (Flash basierend). Der Nachteil daran ist, dass es sehr Leistungshungrig ist und von den meisten mobilen Geräten nicht unterstützt wird.

Der Vorteil davon seine Videos selbst bereit zu stellen ist die Kontrolle darüber, wie das Video angezeigt wird. Man ist nicht von willkürlichen Youtube Gema-Bestimmungen eingeschränkt und hat die Möglichkeit selbst zu bestimmen, wie das Video den Besuchern präsentiert wird.

Das Richtige Format für ein Web Video

Von HTML 5 werden drei Videoformate unterstützt. Das Allseits bekannte MP4 aber auch die Webformate WebM und Ogg.
Welcher Browser mit welchem Format umgehen kann seht ihr hier unten.

MP4 WebM Ogg
Internet Explorer 9+
Google Chrome 6+
Mozilla Firefox 3.6+
Apple Safari 5+
Opera 10.6+
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

 

Es ist keine Pflicht alle Formate zu verwenden, es reicht aus wenn ihr alle Browser unterstützt (Beispielsweise mit MP4 und Ogg).

Das hochgeladene Video in die Webseite einbinden.

Damit ihr das hochgeladene Video an der richtigen Stelle anzeigen könnt müsst ihr nur den folgenden Code verwenden:

<video width=”320″ height=”240″>

<source src=”movie.mp4″ type=”video/mp4″ />

<source src=”movie.ogg” type=”video/ogg” />

<source src=”movie.ogg” type=”video/webm” />

</video>

Mit “width” und “height” könnt ihr die Größe eures Videofensters in Pixel angeben. Mehr müsst ihr nicht mehr machen.

Ein Beispiel

Zum Schluss habe ich noch ein Beispielvideo für euch, welches ich genau auf diese Art eingebunden habe.

<video width=”640″ height=”360″ poster=”https://fotografieren-lernen.eu/wp-5763c-content/uploads/2013/08/GOPR0053-2.jpg” controls=”controls”><source src=”https://fotografieren-lernen.eu/wp-5763c-content/uploads/2013/08/holi-festival-of-colours-mannheim.mp4″ type=”video/mp4″ /><source src=”https://fotografieren-lernen.eu/wp-5763c-content/uploads/2013/08/holi-festival-of-colours-mannheim.webm” type=”video/webm” /></video>

Viel Spaß beim ausprobieren, schreibt einen Kommentar wenn ihr fragen habt.

Gruß

Matthias

Matthias Butz

Mein Name ist Matthias Butz und ich bin Fotograf und Digital Artist im Raum Ludwigshafen – Mannheim – Heidelberg. Ok, eigentlich bin ich gar kein Fotograf, zumindest kein gelernter. Ich komme aus der IT, wo ich viele Jahre tätig war. Die Fotografie war jedoch schon immer mein Hobby, meine Leidenschaft und so kam es, dass ich eines Tages das Hobby zum Beruf gemacht habe. Ich bin der Meinung, dass man diese Leidenschaft durch nichts ersetzen kann. Ich liebe, was ich mache und habe Spaß dabei! Wenn man Spaß an etwas hat, ist man deutlich motivierter und kniet sich mehr rein als andere, um Schritt für Schritt besser zu werden. Ich möchte weg von engstirnigen Denken und probiere immer wieder neue Sachen aus um meinen Horizont zu erweitern. Das ist auch der Grund, warum ich die Dinge deutlich lockerer sehe als andere. Ich lasse mich auf mein Team und die Personen mit denen ich Arbeite ein um bessere Ergebnisse zu bekommen.

Alle Beiträge anzeigen

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.