1

I have an html5 video and I'd like to make it interactive. If a user clicks on a certain area of the video (let's say top left area), that makes the video time changes -> currenttime=60 (just an example)

If he clicks on the bottom right area, currenttime=138. How can I do that?

I know I need to create an overlay div and make it clickable but I really need some help with that.

Thanks for reading!

0x17
  • 131
  • 1
  • 3
  • 10
  • Check the info here. And do some fancy math to find the "quadrant" you want. http://stackoverflow.com/questions/3234977/using-jquery-how-to-get-click-coordinates-on-the-target-element – CP510 Sep 04 '13 at 18:28
  • Thanks for the link but I don't think I need coordinates and stuff like that because I just need to click on a div not an exact coordinate. But thanks anyway :) – 0x17 Sep 04 '13 at 19:00
  • Well then its just `$('#divID').click(function() { YOUR CODE });`. – CP510 Sep 04 '13 at 19:02

1 Answers1

0

I'll give an example of changing it to 3seconds, you can understand from it how to make it 60 or 138. In jsfiddle: http://jsfiddle.net/3jyFU/

If doesn't work:

HTML:

<video id="video1" controls="controls">
  <source src="http://www.808.dk/pics/video/gizmo.mp4" type="video/mp4">
  <source src="http://www.808.dk/pics/video/gizmo.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<div id="time_3" onclick="setCurTime()"></div>

      <script>
          myVid=document.getElementById("video1");
function setCurTime()
  { 
  myVid.currentTime=3;
  }
      </script>

      <p> Press the top-left part of the video to make it jump to 3 seconds.</p>

CSS:

#video1{
    width:500px;
    position:absolute;
}
#time_3{
    position:relative;
    width:250px;
    height:125px;
    cursor:pointer;
}

p {
    margin-top:170px;
}
OriShuss
  • 269
  • 2
  • 3
  • 14