Skip to content

Instantly share code, notes, and snippets.

@jls

jls/example_pndt_jwplayer_dynamic.html

Created September 16, 2011 19:52
Show Gist options
  • Save jls/1222966 to your computer and use it in GitHub Desktop.
Save jls/1222966 to your computer and use it in GitHub Desktop.
Download ZIP
Example Punndit Embed for JW Player with Dynamic Video Changing
Raw
example_pndt_jwplayer_dynamic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JW Player Example - With Dynamic Video Changes</title>
<!-- Stylesheet for the Punndit Bar -->
<link rel="stylesheet" href="http://cdn.punndit.com/stylesheets/bar.css" type="text/css" media="screen" charset="utf-8" id="pndt-bar-css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type='text/javascript' src='./jwplayer.js'></script>
<style type="text/css" media="screen">
.rounded:visited{
color: blue;
}
</style>
</head>
<body>
<div id="punn-container" class="punndit" data-punn-uid="http://d3hd7c33w2kwsv.cloudfront.net/aca722ec-2038-4759-98e4-93430910abda_ncaa-cms-mp4-s3.flv">
<div class="pndt-video-screen">
<div class="pndt-video">
<div id="mediaspace"></div>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
var url, videoLabel = '';
var matches = window.location.href.match(/video=(\w+)/)
videoLabel = (matches && matches.length > 1) ? matches[1] : 'gameday'
switch(videoLabel){
case "campus":url=$('#TMB2').attr('data-clip-url');break;
case "store":url=$('#TMB3').attr('data-clip-url');break;
case "gameday":url=$('#TMB1').attr('data-clip-url');break;
}
$('.punndit').attr('data-punn-uid', url);
jwplayer('mediaspace').setup({
wmode: "transparent",
'flashplayer': 'http://cdn.punndit.com/jwplayer/player.swf',
'file': url,
'controlbar': 'bottom',
'width': '640',
'height': '390',
'autostart': false,
events:{
onReady: function(){
embedPunnditBar(this.id, 'jwplayer');
}
}
});
});
</script>
<!-- Links to switch videos -->
<a id="TMB1" class="galTMB1 rounded shadow alt-video" href="?video=gameday" data-clip-url="http://d3hd7c33w2kwsv.cloudfront.net/aca722ec-2038-4759-98e4-93430910abda_ncaa-cms-mp4-s3.flv">gameday</a>
<a id="TMB2" class="galTMB2 rounded shadow alt-video" href="?video=campus" data-clip-url="http://d3hd7c33w2kwsv.cloudfront.net/8b5dd6d8-c917-4e55-bfff-f652968675c0_ncaa-cms-mp4-s3.flv">campus</a>
<a id="TMB3" class="galTMB3 rounded shadow alt-video" href="?video=store" data-clip-url="http://d3hd7c33w2kwsv.cloudfront.net/bccd1aec-7ade-46f9-b8a1-e8865774ff4d_ncaa-cms-mp4-s3.flv">store</a>
<!-- This block has not changed -->
<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,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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment