drewww · June 6, 2013 19:21
diff --git a/chromeless-state-test.html b/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>