Question

我正在修改HTML5视频。我有一个使用vanilla HTML5 <video>标记的视频，如下所示：

<video id="video" width="250" height="250" controls>
    <source src="video_src.mp4" type="video/mp4">
</video>

一切都很好。我正在寻找的是在视频底部增加一个搜索栏的方法。搜索栏将是我拥有的代表视频的图像。通过单击图像上的任意位置，视频将移动到该点。

同样，除了默认视频功能附带的默认进度条之外，这还可以使用。默认和自定义搜索栏必须同步，以便在更新一个时，另一个也会移动。

有人能指出我正确的方向吗？

谢谢！

Answer 1

var vid = document.getElementById("video");
vid.ontimeupdate = function(){
  var percentage = ( vid.currentTime / vid.duration ) * 100;
  $("#custom-seekbar span").css("width", percentage+"%");
};

$("#custom-seekbar").on("click", function(e){
    var offset = $(this).offset();
    var left = (e.pageX - offset.left);
    var totalWidth = $("#custom-seekbar").width();
    var percentage = ( left / totalWidth );
    var vidTime = vid.duration * percentage;
    vid.currentTime = vidTime;
});//click()

#custom-seekbar
{  
  cursor: pointer;
  height: 10px;
  margin-bottom: 10px;
  outline: thin solid orange;
  overflow: hidden;
  position: relative;
  width: 400px;
}
#custom-seekbar span
{
  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0px;
}

/* following rule is for hiding Stack Overflow's console  */
.as-console-wrapper{ display: none !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="custom-seekbar">
  <span></span>
</div>
<video id="video" width="400" controls autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

HTML5视频自定义附加搜索栏

1 个答案: