15.03.2013

HTML5-Videoeinbindung mit Flash-Fallback

von Ph. Honegger / SOBAG

Wir zeigen auf, wie ein Video mit dem HTML5-Video-Tag eingebunden wird und wie auf das Flash-File zurückgegriffen wird, wenn der Browser den Tag nicht unterstützt.

Somit sollten Videos in allen Browsern und auf mobilen Geräte dargestellt werden können.

Für die Flash-Einbindung brauchen wir SWFObject:

http://code.google.com/p/swfobject/downloads/list

Wir versorgen die Dateien in einen Subordner «swfobject».

Und weil wir die Sache mit dem HTML5-Video-Tag mit jQuery prüfen, muss das auch eingebunden werden.

Folgender Code gehört in den <head>-Bereich der Webseite:

<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var v = document.createElement("video"); // <video> unterstuetzt?
if ( !v.play ) { // wenn nein -> Flash-File
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "film.flv",
image: "startbild.jpg",
scale: "exactFit"
};
swfobject.embedSWF("player.swf", "video-flash", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params);
}
});
</script>

Dort, wo das Video eingebunden werden soll, pflanzen wir folgenden Code ein:

<div id="video-flash">
<video id="video" poster="marketingtag_start.jpg" controls width="700" height="393">
<source src="film.mp4" type="video/mp4" />
<source src="film3.ogv" type="video/ogg" />
<source src="film.webm" type='video/webm' />
</video>
</div>

Für die Konvertierung der Videos empfehlen wir:

http://www.freemake.com/de/free_video_converter/

 

Die ganze Geschichte ist hier im Einsatz:

html5 video im Einsatz

 

PS: Wenn ihr während des Entwickelns einer Webseite einen Verzeichnisschutz über eure Webseite gelegt habt, gibt es Probleme beim Abspielen der Videos, weil offenbar Mobile-Browser trotz erfolgtem Login nicht auf die Video-Files zugreifen können.

Meier + Cie AG
SOBAG
Vordergasse 58
8201 Schaffhausen

Tel. +41 52 633 35 55
E-Mail: infosobagch

Unsere Portale:

nordagenda.ch schaffhausen.ch