HTML5视频自定义附加搜索栏 [英] HTML5 Video custom additional seek bar

问题描述

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

I am tinkering around with HTML5 videos. I have a video working by using the vanilla HTML5 <video> tag, something like this:

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

一切都很好。我正在寻找的是在视频底部添加一个搜索栏的方法。 seekbar将是我拥有的代表视频的图像。通过点击图片上的任何位置，视频就会移动到那一点。

All is well. What I'm looking for is a way to have an additional seek bar at the bottom of the video. The seekbar will be an image I have that represents the video. By clicking anywhere on the image, the video will move to that point.

再次，除默认视频功能附带的默认进度栏之外，此功能还可以使用。默认和自定义的seekbar必须同步，这样当一个更新时，另一个也会移动。

Again, this will work in addition to the default progress bar that comes with the default video functionality. The default and the custom seekbar would have to be in sync so that when one is updated, the other moves as well.

任何人都可以指向正确的方向吗？

Can anyone point me to the right direction?

谢谢！

Thanks!

推荐答案

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视频自定义附加搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！