videoInteractivo

by jpeter06

HTML

<div id="container" style="position: relative; width: 640px; height: 360px;">
    <video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" width="640" height="360" style="position: absolute;" autoplay ></video>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" usemap="planetmap" width="640" height="360" style="position: absolute;"/>
</div>
<map name="planetmap" id="planetmap">
  <area shape="rect" coords="0,0,82,126" href="3" alt="Sun">
  <area shape="circle" coords="90,58,3" href="5" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="8" alt="Venus">
</map>

CSS

html, body{overflow:hidden}

JavaScript

$(document).ready(function(){
	$( "#planetmap area" ).each(function( e ) {
  	$( this ).mouseover(function() {
    	var alt = $(this).attr('href');
      var vid = document.getElementById("video");
      vid.currentTime=0+alt;
  		console.log("over:"+alt)
		});
	});
  
   $('#planetmap').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        //console.log("X: " + x + " Y: " + y); 
        var vid = document.getElementById("video");
        vid.currentTime=x/10;
    });
})