jls/example_punndit_jwplayer.html

## example_punndit_jwplayer.html
<!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>
	<!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>