Skip to content

Instantly share code, notes, and snippets.

@jls
Created August 30, 2011 15:39
Show Gist options
  • Save jls/1181199 to your computer and use it in GitHub Desktop.
Save jls/1181199 to your computer and use it in GitHub Desktop.
Example Punndit Embed for JW Player
<!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