javascript - ビデオの特定の領域をクリックして、ビデオの時間を変更します

Question

HTML5 ビデオがあり、インタラクティブにしたいと考えています。ユーザーがビデオの特定の領域 (左上の領域としましょう) をクリックすると、ビデオの時間が変更されます -> currenttime=60 (単なる例)

右下の領域をクリックすると、currenttime=138 になります。どうやってやるの？

オーバーレイ div を作成してクリック可能にする必要があることはわかっていますが、それには本当に助けが必要です。

読んでくれてありがとう！

Answer 1

3 秒に変更する例を示します。60 または 138 にする方法が理解できます。jsfiddle: http://jsfiddle.net/3jyFU/

うまくいかない場合:

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;
}