fatherJS
7/19/2012 - 7:34 PM

Trigger fullscreen HTML5 video on iPad

Trigger fullscreen HTML5 video on iPad

gistfile1.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<title>Trigger fullscreen HTML5 video on iPad</title>
<style>
#video { height: 1px; opacity: 0; position: absolute; width: 1px; }
#play { width: 100px; }
</style>
</head>
<body>

<video src="http://82.201.53.54:1935/livestream/iphone538.sdp/playlist.m3u8" id="video"></video>
<button id="play">play fullscreen video</button>

<script>

var video = document.getElementById('video'),
	play = document.getElementById('play'),
	time;

video.addEventListener('webkitbeginfullscreen', function() {

	play.innerText = 'play fullscreen video';
	window.clearInterval(time);

});

video.addEventListener('webkitendfullscreen', function() {

	video.pause();

});

play.addEventListener('touchstart', function() {

	time = window.setInterval(function() {

		try {
			video.webkitEnterFullscreen();
		}

		catch(e) {}

	}, 250);

	play.innerText = 'loading ...';
	video.play();	

});

</script>

</body>
</html>