HTML5 Video Tutorial – Teil 2 – Der HTML5 Video Tag und iPhone Weiche

Februar 23, 2011 11:00 pm 1 Kommentar

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.

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.
Zum dritten Teil

Begleitende Informationen zum Video

Quelltext der Beispielseite

<!DOCTYPE html>
<html>
<head>
<title>Videotest</title>
</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>
</video>
<script type="text/javascript">
	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>

1 Kommentar

  • Michael Rennen schreibt am 19. Oktober 2012 um 19:40 Uhr:

    Eines der besten Tutorials die ich bislang gesehen habe – DANKE

    Was mich jetzt noch interessieren würde – wie bekomme ich Text über die jeweiligen Videos – so dass die dynamisch nach unten weg gefüllt werden in einer Art Layer

    Aber das wäre wohl zuviel verlangt 🙂

    Antworten

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