Javascript HTML5视频自定义附加搜索栏

我正在修补HTML5视频。我有一个视频使用普通的HTML5

标签，类似这样：

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

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

同样，除了默认视频功能附带的默认进度条之外，这也可以工作。默认seekbar和自定义seekbar必须同步，以便在更新一个seekbar时，其他seekbar也会移动

谁能给我指一下正确的方向吗

谢谢

var vid=document.getElementById（“视频”）；
vid.ontimeupdate=函数（）{
风险值百分比=（vid.currentTime/vid.duration）*100；
$（“#自定义seekbar span”）.css（“宽度”，百分比+“%”）；
};
$（#自定义seekbar”）。在（“单击”上，函数（e）{
var offset=$（this.offset（）；
var left=（e.pageX-offset.left）；
var totalWidth=$（“#自定义seekbar”）.width（）；
变量百分比=（左/总宽度）；
var vidTime=vid.duration*百分比；
vid.currentTime=vidTime；
});//单击（）

#自定义搜索栏
{  
光标：指针；
高度：10px；
边缘底部：10px；
轮廓：薄而实的橙色；
溢出：隐藏；
位置：相对位置；
宽度：400px；
}
#自定义搜索范围
{
背景颜色：橙色；
位置：绝对位置；
排名：0；
左：0；
高度：10px；
宽度：0px；
}
/*以下规则用于隐藏堆栈溢出的控制台*/
.as控制台包装{显示：无！重要；}

我个人很难将其概念化，但我可以想象，你必须将视频的总时间划分为搜索栏的宽度，点击某个位置将计算出当前时间和搜索栏上分配给该扇区的时间的差异，然后将其添加到视频中。你说得对@Crowes。我在下面实现了同样的功能。这太棒了。如何单击顶部的自定义搜索栏，然后更改视频的位置？现在，您只能使用默认的搜索栏进行搜索。@intl我已经更新了我的答案，将其包括在内。请注意，这是一个基本的实现，您可能需要进行一些微调。@MohitBhardwaj，做得很好dude（y）@MohitBhardwaj的难度刚刚升级到挑战者级别。@noogui:D也许您可以创建一个新问题，添加您尝试过的内容