scoutman57/interactive_video_test.html

## interactive_video_test.html
<!doctype html>
<html>
<head>
<title>Interactive video test</title>
</head>
<style type="text/css">
	#playerContainer{
		position:relative;
		width:640px;
		height:390px;
	}
	#playerOverlay{
		background-color:transparent;
		width:640px;
		height:390px;
		z-index:1200;
		position:absolute;
		top:0px;
		left:0px;
		z-index:2;
	}
	#playerOverlay:hover{
		cursor:pointer;
	}
	iframe{
		position:absolute;
		top:0px;
		left:0px;
		z-index:1;
	}
</style>
<body>
<div id="playerContainer">
<div id="player"></div>
<div id="playerOverlay"></div>
</div>
	<script>

	function Timer(callback, delay) {
		var timerId, start, remaining = delay;

		this.pause = function() {
			window.clearTimeout(timerId);
			remaining -= new Date() - start;
		};

		this.resume = function() {
			start = new Date();
			if(remaining > 0)
				timerId = window.setTimeout(callback, remaining);
		};

		this.resume();
	}

	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	var player;
	var timeout;
	function onYouTubeIframeAPIReady() {
		player = new YT.Player('player', {
			height: '390',
			width: '640',
			videoId: 'M7lc1UVf-VE',
			playerVars:{
				controls: 0,
				showinfo: 0 ,
				modestbranding: 1,
				wmode: "opaque"
			},
			events: {
				'onReady': onPlayerReady
			}
		});
		document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
	}

	function onPlayerReady(event) {
		event.target.playVideo();
		timeout = new Timer(setupQuestion, 19200);
	}

	function togglePlayback()
	{
		if(player.getPlayerState() === YT.PlayerState.PLAYING)
		{
			player.pauseVideo();
			timeout.pause();
		}
		else
		{
			player.playVideo();
			timeout.resume();
		}
	}

	function setupQuestion()
	{
		player.pauseVideo();
		document.getElementById('playerOverlay').removeEventListener('click',togglePlayback);
		document.getElementById('question').style.display = 'block';
	}

	function questionError()
	{
		alert('You\'re n00b yourself >;P');
	}

	function questionOK()
	{
		document.getElementById('question').style.display = 'none';
		document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
		player.playVideo();
	}

	</script>
<div id="question" style="display:none">
	<p>Before continuing this video answer the following question.</p>
	<p>Robert is:</p>
	<input type="radio" name="questionRadio" value="epic" onClick="questionOK()"> Epic<br>
	<input type="radio" name="questionRadio" value="n00b" onClick="questionError()"> N00b<br>
</div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Interactive video test</title>
	</head>
	<style type="text/css">
	#playerContainer{
	position:relative;
	width:640px;
	height:390px;
	}
	#playerOverlay{
	background-color:transparent;
	width:640px;
	height:390px;
	z-index:1200;
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
	}
	#playerOverlay:hover{
	cursor:pointer;
	}
	iframe{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	}
	</style>
	<body>
	<div id="playerContainer">
	<div id="player"></div>
	<div id="playerOverlay"></div>
	</div>
	<script>

	function Timer(callback, delay) {
	var timerId, start, remaining = delay;

	this.pause = function() {
	window.clearTimeout(timerId);
	remaining -= new Date() - start;
	};

	this.resume = function() {
	start = new Date();
	if(remaining > 0)
	timerId = window.setTimeout(callback, remaining);
	};

	this.resume();
	}

	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	var player;
	var timeout;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: 'M7lc1UVf-VE',
	playerVars:{
	controls: 0,
	showinfo: 0 ,
	modestbranding: 1,
	wmode: "opaque"
	},
	events: {
	'onReady': onPlayerReady
	}
	});
	document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
	}

	function onPlayerReady(event) {
	event.target.playVideo();
	timeout = new Timer(setupQuestion, 19200);
	}

	function togglePlayback()
	{
	if(player.getPlayerState() === YT.PlayerState.PLAYING)
	{
	player.pauseVideo();
	timeout.pause();
	}
	else
	{
	player.playVideo();
	timeout.resume();
	}
	}

	function setupQuestion()
	{
	player.pauseVideo();
	document.getElementById('playerOverlay').removeEventListener('click',togglePlayback);
	document.getElementById('question').style.display = 'block';
	}

	function questionError()
	{
	alert('You\'re n00b yourself >;P');
	}

	function questionOK()
	{
	document.getElementById('question').style.display = 'none';
	document.getElementById('playerOverlay').addEventListener('click',togglePlayback);
	player.playVideo();
	}

	</script>
	<div id="question" style="display:none">
	<p>Before continuing this video answer the following question.</p>
	<p>Robert is:</p>
	<input type="radio" name="questionRadio" value="epic" onClick="questionOK()"> Epic<br>
	<input type="radio" name="questionRadio" value="n00b" onClick="questionError()"> N00b<br>
	</div>
	</body>
	</html>