drewww/chromeless-state-test.html

## chromeless-state-test.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>viddler-test</title>
	<script src="http://www.google.com/jsapi"></script>
  	<script>google.load("swfobject", "2.1");</script>
  	<script src="http://cdn.static.viddler.com/js/vapi.js" type="text/javascript"></script>
  	<script src='http://code.jquery.com/jquery-2.0.0.js' type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
		var player;

		var videoIds = ["e383b3f", "96b407b6", "bbf64d9e", "29f6c9c9"];
		var counter = 0;

		function getNextVideo() {
			if(counter == videoIds.length) counter=0;

			return videoIds[counter++];
		}

		window.onViddlerPlayerReady = function() {
		    console.log("viddler player API loaded!");
			player = document.getElementById("player");
			player.addEventListener("onStateChange", "onStateChange");
		}

		function onStateChange(newState) {
			console.log("new state: " + newState);
			$("#states").append($("<div>new state: "+newState+"</div>"))
		}

		function createViddlerPlayer(targetId, playerId, width, height) {
		    // if we have player elements, load the viddler API and then populate
		    // the elements with players. For now, we're only expecting to have one
		    // player per page max.
		    console.log("creating viddler player on " + targetId + " with id " + playerId);
		    var params = { allowScriptAccess: "always", bgcolor: "#f0f3f6" };
		    var atts = { id: playerId };
		    var flashvars = { fake : '1',  enablejsapi : '1' };
		    swfobject.embedSWF("http://www.viddler.com/chromeless",
		        targetId, "" + width, "" + height, "9", null, flashvars, params, atts);
		}

		$(document).ready(function() {
			createViddlerPlayer("player-target", "player", 400, 300);

			$("#cue").click(function() {
				player.cueVideoById(getNextVideo());
				$("#states").empty();
				$("#states").append($("<div>LOADED at 0</div>"));
			});
			$("#cue_0").click(function() {
				player.cueVideoById(getNextVideo(), 30);
				$("#states").empty();
				$("#states").append($("<div>LOADED at 30</div>"));
			});
			$("#cue_30").click(function() {
				player.cueVideoById(getNextVideo(), 60);
				$("#states").empty();
				$("#states").append($("<div>LOADED at 60</div>"));
			});
			$("#play").click(function() {
				player.playVideo();
			});
			$("#pause").click(function() {
				player.pauseVideo();
			});
			$("#seek").click(function() {
				player.seekTo(60);
			});

		});

	</script>
	<style type="text/css" media="screen">

	</style>
</head>
<body id="viddler-test" onload="">
<div id="player-target"></div>
<div class="button" id="cue">cue</div>
<div class="button" id="cue_0">cue (30 seconds)</div>
<div class="button" id="cue_30">cue (60 seconds)</div>
<div class="button" id="play">play</div>
<div class="button" id="pause">pause</div>
<div class="button" id="seek">seek</div>

<div id="states">
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>viddler-test</title>
	<script src="http://www.google.com/jsapi"></script>
	<script>google.load("swfobject", "2.1");</script>
	<script src="http://cdn.static.viddler.com/js/vapi.js" type="text/javascript"></script>
	<script src='http://code.jquery.com/jquery-2.0.0.js' type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
	var player;

	var videoIds = ["e383b3f", "96b407b6", "bbf64d9e", "29f6c9c9"];
	var counter = 0;

	function getNextVideo() {
	if(counter == videoIds.length) counter=0;

	return videoIds[counter++];
	}

	window.onViddlerPlayerReady = function() {
	console.log("viddler player API loaded!");
	player = document.getElementById("player");
	player.addEventListener("onStateChange", "onStateChange");
	}

	function onStateChange(newState) {
	console.log("new state: " + newState);
	$("#states").append($("<div>new state: "+newState+"</div>"))
	}

	function createViddlerPlayer(targetId, playerId, width, height) {
	// if we have player elements, load the viddler API and then populate
	// the elements with players. For now, we're only expecting to have one
	// player per page max.
	console.log("creating viddler player on " + targetId + " with id " + playerId);
	var params = { allowScriptAccess: "always", bgcolor: "#f0f3f6" };
	var atts = { id: playerId };
	var flashvars = { fake : '1', enablejsapi : '1' };
	swfobject.embedSWF("http://www.viddler.com/chromeless",
	targetId, "" + width, "" + height, "9", null, flashvars, params, atts);
	}

	$(document).ready(function() {
	createViddlerPlayer("player-target", "player", 400, 300);

	$("#cue").click(function() {
	player.cueVideoById(getNextVideo());
	$("#states").empty();
	$("#states").append($("<div>LOADED at 0</div>"));
	});
	$("#cue_0").click(function() {
	player.cueVideoById(getNextVideo(), 30);
	$("#states").empty();
	$("#states").append($("<div>LOADED at 30</div>"));
	});
	$("#cue_30").click(function() {
	player.cueVideoById(getNextVideo(), 60);
	$("#states").empty();
	$("#states").append($("<div>LOADED at 60</div>"));
	});
	$("#play").click(function() {
	player.playVideo();
	});
	$("#pause").click(function() {
	player.pauseVideo();
	});
	$("#seek").click(function() {
	player.seekTo(60);
	});

	});

	</script>
	<style type="text/css" media="screen">

	</style>
	</head>
	<body id="viddler-test" onload="">
	<div id="player-target"></div>
	<div class="button" id="cue">cue</div>
	<div class="button" id="cue_0">cue (30 seconds)</div>
	<div class="button" id="cue_30">cue (60 seconds)</div>
	<div class="button" id="play">play</div>
	<div class="button" id="pause">pause</div>
	<div class="button" id="seek">seek</div>

	<div id="states">
	</div>
	</body>
	</html>