Created
August 30, 2011 15:39
-
-
Save jls/1181199 to your computer and use it in GitHub Desktop.
Example Punndit Embed for JW Player
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<title>JW Player</title> | |
</head> | |
<body> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
<script type='text/javascript' src='./jwplayer.js'></script> | |
<div id="punn-container" class="punndit" data-punn-uid="http://localhost:3000/jwplayer/6fc02a"> | |
<div class="pndt-video-screen"> | |
<div class="pndt-video"> | |
<div id="mediaspace"></div> | |
</div> | |
</div> | |
</div> | |
<script type='text/javascript'> | |
var punnditLoaded = false; | |
var abc = jwplayer('mediaspace').setup({ | |
wmode: "transparent", | |
'flashplayer': 'player.swf', | |
'file': 'http://content4.longtailvideo.com/videos/flvplayer.flv', | |
'controlbar': 'bottom', | |
'width': '640', | |
'height': '390', | |
events:{ | |
onReady: function(){ | |
// If you were going to display one single video | |
// in this player without changing it then you can use | |
// this onReady event to make the following call: | |
// embedPunnditBar(this.id, 'jwplayer'); | |
}, | |
onPlaylistItem: function(){ | |
// When the videos for this player are going to change (without page reload) | |
// this event will need to be uesd. | |
// We have to determine if the player has already been | |
// loaded. The cheapest way to do this is just store a flag. | |
if(punnditLoaded) | |
{ | |
// Change the UID on the punndit-container so the bar can distinguish | |
// between different videos. We use the URL of the media clip as | |
// the UID in this example. | |
var mediaURL = this.getPlaylist()[0]['file']; | |
$('.punndit').attr('data-punn-uid', mediaURL); | |
// We have to call reattach here instead of attach | |
// to give the bar a chance to do a little cleanup. | |
pndt.embed.bar.reattach(this.id, 'jwplayer'); | |
} | |
else{ | |
// The PunnBar hasn't been loaded yet so make | |
// the standard calls to embed and init the bar. | |
embedPunnditBar(this.id, 'jwplayer'); | |
punnditLoaded = true; | |
} | |
} | |
} | |
}); | |
$('.alt-video').live('click', function(){ | |
var $a = $(this); | |
jwplayer().load($a.attr('href')); | |
return false; | |
}); | |
</script> | |
<script type="text/javascript"> | |
var punndit_container_class = 'punndit'; | |
var punndit_api_key = 'YOUR-API-KEY'; | |
var punndit_endpoint = 'api.punndit.com/embed/bar.js?key=' + punndit_api_key; | |
var punndit_queue = []; | |
function embedPunnditBar(playerID, adapterName){ | |
typeof pndt==="undefined"?punndit_queue.push([playerID,adapterName]):pndt.embed.bar.attachTo(playerID,pndt.players[adapterName])} | |
(function() { | |
var p = document.createElement('script'); p.type = 'text/javascript'; p.async = true; | |
p.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + punndit_endpoint; | |
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(p); | |
})(); | |
</script> | |
<a href="http://content4.longtailvideo.com/videos/bunny.mp4" class="alt-video" style="color: #000">Load the Big Buck Bunny trailer</a> | | |
<a href="http://content4.longtailvideo.com/videos/sintel.mp4" class="alt-video" style="color: #000">Load the Sintel trailer</a> | | |
<a href="http://content4.longtailvideo.com/videos/commercial.mp4" class="alt-video" style="color: #000">Load the Dutch CF trailer</a> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment