Skip to content

Instantly share code, notes, and snippets.

@drewww
Created June 6, 2013 19:21
Show Gist options
  • Save drewww/5724154 to your computer and use it in GitHub Desktop.
Save drewww/5724154 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment