cole-gillespie · September 27, 2011 14:12
diff --git a/gistfile1.js b/gistfile1.js
 <!DOCTYPE html>
 <html>
 <head>
  <title>Popcorn.js Tour Plug-in Demo</title>
  <style type="text/css">
    body{
      margin: 0; padding: 0;
     
      font-family: Georgia;
    }
    a{
     color: #3BA3D0;
     text-decoration: none;
    }
    
    p{
     font-size: 14px;
     
    }
    
    #wrapper{
      width: 980px; 
      height: 280px; 
     
      margin: auto;
      padding-top: 20px;
    }
    
    #pano{
      width: 480px; 
      height: 290px;
      float: left; 
     
    }
  
    #tease{
      width:980px; margin:auto; text-align:center; 
    }
  
  </style>
  <script src="js/popcorn.js"></script>
  <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  <script src="js/popcorn.code.js"></script>
  
 </head>
 <body>

    <video id='video' controls width= '100px' style="float: left;"> 
      <source id='ogv' src="video/devDerb.ogv" type='video/ogg; codecs="theora, vorbis"'> 
      <p>Your user agent does not support the HTML5 Video element.</p> 
    </video> 
    
    <input type="range" min="0" max="10" step="2" value="6">
    
    <div id="time"></div>
  <script type="text/javascript">
  
   document.addEventListener('DOMContentLoaded', function () {
   
       init();
       
   }, false);
    
   function init() {
  
    $('#wrapper').css('visibility', 'visible');
    
    $("#video").hover(function(){
        $(this).width(479)
      },function(){
        $(this).width(100)
      }
    );

     var p = Popcorn('#video')
  
     .code({
       start: 0,
       end: 180,
       onStart: function (options) {
         console.log('start')
       },
       onFrame: (function () {
          var count = 0;
          return function (options) {
           
          //var t = roundNumber( this.Popcorn.instances[0].media.currentTime, 3 );
           
          var time =  document.getElementById('time');
          
          time.innerHTML = '' + this.Popcorn.instances[0].media.currentTime, + '';
            
         }
       })(),
       onEnd: function (options) {
         $('#test3c').innerHTML = 'Yes';
       }
     })
  
     .play();
     
   }
  
   function roundNumber(num, dec) {
     var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
     return result;
   }
  
   function draw(img) {
     //console.log(img);
     mesh.materials[0].map = img;
   }
   </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Popcorn.js Tour Plug-in Demo</title>
	<style type="text/css">
	body{
	margin: 0; padding: 0;

	font-family: Georgia;
	}
	a{
	color: #3BA3D0;
	text-decoration: none;
	}

	p{
	font-size: 14px;

	}

	#wrapper{
	width: 980px;
	height: 280px;

	margin: auto;
	padding-top: 20px;
	}

	#pano{
	width: 480px;
	height: 290px;
	float: left;

	}

	#tease{
	width:980px; margin:auto; text-align:center;
	}

	</style>
	<script src="js/popcorn.js"></script>
	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script src="js/popcorn.code.js"></script>

	</head>
	<body>

	<video id='video' controls width= '100px' style="float: left;">
	<source id='ogv' src="video/devDerb.ogv" type='video/ogg; codecs="theora, vorbis"'>
	<p>Your user agent does not support the HTML5 Video element.</p>
	</video>

	<input type="range" min="0" max="10" step="2" value="6">

	<div id="time"></div>
	<script type="text/javascript">

	document.addEventListener('DOMContentLoaded', function () {

	init();

	}, false);

	function init() {

	$('#wrapper').css('visibility', 'visible');

	$("#video").hover(function(){
	$(this).width(479)
	},function(){
	$(this).width(100)
	}
	);

	var p = Popcorn('#video')

	.code({
	start: 0,
	end: 180,
	onStart: function (options) {
	console.log('start')
	},
	onFrame: (function () {
	var count = 0;
	return function (options) {

	//var t = roundNumber( this.Popcorn.instances[0].media.currentTime, 3 );

	var time = document.getElementById('time');

	time.innerHTML = '' + this.Popcorn.instances[0].media.currentTime, + '';

	}
	})(),
	onEnd: function (options) {
	$('#test3c').innerHTML = 'Yes';
	}
	})

	.play();

	}

	function roundNumber(num, dec) {
	var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
	return result;
	}

	function draw(img) {
	//console.log(img);
	mesh.materials[0].map = img;
	}
	</script>
	</body>
	</html>