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