HTML5

Video auf der eigenen Webseite zeigen, wie geht das? Da gibt es grundsätzlich zwei Möglichkeiten: Entweder per Einbettung von einem Videoportal wie Youtube, oder direkt von der eigenen Webseite. Im zweiten Falle hilft der HTML5-Videotag.

HTML5-Videotag

onlineshops-mit-wordpress

Musik im eigenen Shop Verkaufen? Das geht mit WordPress: Onlineshops mit WordPress – das große Praxishandbuch.

Der Video-Tag <video> ist eine Neuerung von HTML5. Er dient dazu, Videos einer Webseite im Browser abzuspielen. Videos können direkt in eine HTML-Seite eingebettet werden, wie Bilder mit dem Image-Tag <img>. Dabei kann die Darstellung des Videofensters auch mit CSS formatiert, und die Videosteuerung mit JavaScript kombiniert werden.

Videotag Beispiel

<video width=“400″ height=“300″ src=“name-des-videos.ogv“ controls=“controls“ poster=“image.jpg“>
</video>

Videotags Attribute

src:
Die URL des Videos, das eingebunden werden soll.

width, height:
Die Höhe und Breite des Videofensters auf der Webseite. Werden beide Werte genannt, so ist auf das richtige Verhältnis zu achten, damit es nicht verzerrt angezeigt wird. Wird nur ein Wert angegeben, so setzt der Browser den anderen Wert in der richtigen Relation.

controls:
controls teilt dem Browser mit, die eigene Videosteuerung anzuzeigen. Fehlt das controls-Attribut, so wird nur das erste Frame des Videos bzw. das Bild, welches unter „poster“ angegeben wurde angezeigt. (Alternative: Eigene Steuerung via Javascript)

poster:
poster definiert die URL des Bildes, welches beim Laden des Videos bzw. bis zum Start des Videos angezeigt wird.

autoplay:
autoplay lässt das Video automatisch abspielen.

loop:
loop lässt das Video immer wieder von vorne beginnen, bis es gestoppt wird.
autopuffer:
autopuffer befiehlt dem Browser das Video sofort im Hintergrund zu laden.

HTML5 im Internet-Explorer

Der Internet-Explorer hat (mal wieder) einige Problemchen. Zumindest die älteren Versionen können kein korrektes HTML5 lesen. Wenn der Browser kein HTML5 kann, solltest du den User darauf hinweisen:

<video src=name-des-videos.ogv
width=400
height=300
controls
poster=image.jpg>
Dein Browser unterstützt die Videowiedergabe dieser Seite leider nicht. Du kannst mein Video aber unter der URL „http://meine-domain.de/name-des-videos.mp4“ herunterladen.
</video>

 

Videoplayer für WordPress

Wer seine Videos von einer Plattform wie Youtube oder Vimeo auf die eigene Seite einbindet, braucht keinen eigenen Videoplayer, höchstens ein Plugin. Als Plugin für WordPress empfiehlt sich MediaElement.js. Media Element.js spielt Video- oder Audiodateien in allen Bereichen von WordPress, also in Artikeln und statischen Seiten. MediaElementJs verwendet die HTML5 Elemente <video> und <audio>. Für ältere, nicht HTML-fähige Browser kommt eine Fallback-Lösung zum Einsatz. Für die Verwendung von MediaElement.js auf HTML5-Seiten siehe unten.

Videoplayer für HTML5

Media Element.js

MediaElement.js gibt es nicht nur als WordPress-Plugin für Video und Audio, sondern auch als Einzellösung für ganz normale HTML5-Seiten. Siehe dazu die Webseite von MediaElement.

Videojs

Die Webseite Videojs.com wirbt mit einem 5 Second Setup. Nunja.. da fragt man sich natürlich schon, wie das gehen soll, denn VideoJS verlangt die Code – Implementierung an drei verschiedenen Stellen der Webseite:

  1. Ein Embed-Code „Video for Everybody“, dort wo das Video angezeigt werden soll
  2. Die Javascript-Bibliothek „video.js“, für die Player-Funktionen
  3. Eine CSS-Datei, zuständig für das Design des Players „video-js.css“

Projekktor

Prokekktor ist ein freier HTML5-Videoplayer mit zahlreichen Add-ons und eigener Supportcommunity auf der Webseite.

Artikel teilen...Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on TumblrShare on LinkedIn

Schreibe einen Kommentar

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