HTML5 Video Tutorial – Teil 3 – Flash Fallback für ältere Browser

März 4, 2011 10:44 pm 2 Kommentare

In dieser Tutorialreihe zeige ich euch, wie ihr selbst Videos auf eurer Homepage in einem Player präsentieren könnt. Hierbei wird auf das neue HTML5 Videoelement und als Fallbacklösung auf Flash zurückgegriffen.

Das iPhone und iPad sollen ebenfalls unterstützt werden.

Teil 1 behandelt die benötigten Formate und die Konvertierung des Quellvideos in diese.
Zum ersten Teil

Teil 2 behandelt den eigentlichen HTML5 Videotag und wie eine Browserweiche in Javascript umgesetzt werden kann, um das Video auch auf dem iPhone darstellen zu können.
Zum zweiten Teil

Teil 3 behandelt die Implementierung einer Fallbacklösung für ältere Browser, welche den HTML 5 Videotag nicht unterstützen. Hierzu wird zusätzlich ein Flash Videoplayer eingebaut.

Begleitende Informationen zum Video

Quelltext der Beispielseite

<!DOCTYPE html>
<html>
<head>
<title>Videotest</title>
<script type="text/javascript" src="flowplayer/flowplayer-3.2.6.min.js"></script>
</head>
<body>

<video id="video" width="640" height="360" controls="true">
	<source id="videoMp4" src="video_h264_ipad.mp4" type="video/mp4"></source>
	<source id="videoWebm" src="video_webm.webm" type="video/webm"></source>
	<source id="videoOgg" src="video_theora.ogv" type="video/ogg"></source>
	<div id="fallback" style="width:640px; height:360px;"></div>
</video>
<script type="text/javascript">
	flowplayer("fallback","flowplayer/flowplayer-3.2.7.swf",{
		clip: {	autoPlay: false,
			autoBuffering: false},
		playlist: ['video_h264_ipad.mp4']
	});

	var browser = navigator.userAgent.toLowerCase();
	document.write('<p>Browser: ' + browser + '</p>');
	if(browser.indexOf('iphone')!=-1){
		var mp4el = document.getElementById('videoMp4');
		var newsrc = mp4el.src.replace('ipad','iphone');
		mp4el.src = newsrc;
		var videoel = document.getElementById('video');
		videoel.load();
		videoel.height = 100;
		videoel.width = 100;
		document.write('<p>iPhone erkannt!</p>');
	}
</script>

</body>
</html>

Flowplayer:
http://flowplayer.org/

2 Pings und Trackbacks

Schreibe einen Kommentar

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

Autor*
E-Mail*
Webseite