index.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>HTML5 Video Thumbnail Demo</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="makethumb.js"></script>
		<style type="text/css">
		  #thumbImg,
		  #thumbImg2, #thumbImg3 {
		    border: 1px solid;
		    position: relative;
		    cursor: pointer;
		  }
		  
		  .playBtn {
        background: url("play.png") no-repeat scroll 0 0 transparent;
        display: block;
        height: 50px;
        right: -15px;
        position: absolute;
        text-indent: -9999px;
        bottom: -15px;
        width: 50px;

		  }
		</style>
		<script type="text/javascript">
		$(document).ready(function() {
		  makeThumb({
        src: 'video.ogg.ogv',
        thumbSelector: '#thumbImg',
        height: '100',
        width: '100',
        numFrames: 15,
        minOffset: 2,
        duration: 200,
        static: 'thumb.png'
      })
      makeThumb({
        src: 'video.ogg.ogv',
        thumbSelector: '#thumbImg2',
        height: '150',
        width: '150',
        numFrames: 10,
        minOffset: 5,
        duration: 300,
        static: 'thumb.png',
        showStaticOff: true
      })
      makeThumb({
        src: 'video.ogg.ogv', //relative to the page
        thumbSelector: '#thumbImg3', //css selector
        height: '150', //px
        width: '150', //px
        numFrames: 1, //int
        minOffset: 40.9, //seconds (can use decimals to pinpoint start frame)
        duration: 300, //milliseconds
        static: 'thumb.png', //relative to the page
        showStaticOff: true //bool
      })
      
		});
		</script>
	</head>
	<body>
	 <p>Requires JQuery.  On hover, will cycle through the video to create a number of preview thumbnail frames and will continue to cycle through while hovered.  Use numFrames: 1 to have a single frame pulled from the video (and minOffset, to set where that comes from).  Use showStaticOff to revert to the static image on hover-off.  duration is how long each frame will last.  If you view source, you'll notice that the element you pass in can be arbitrarily styled and can contain arbitrary elements inside it (in this example, we added a play button with an anchor).</p>
	 <div id="thumbImg">
	   <a href="#" class="playBtn">Play</a>
	 </div>
	 <br /><br />
	  <div id="thumbImg2">
	   <a href="#" class="playBtn">Play</a>
	 </div>
	  <br /><br />
	  <div id="thumbImg3">
	   <a href="#" class="playBtn">Play</a>
	 </div>

	 
	 </body>
</html>