Javascript 重新定位HTML5视频seekbar

我试图用HTML创建一个模拟页面，在后台全屏播放视频。我有一个trasparent图像，覆盖在背景视频上，模拟播放按钮和标题（所有按钮都只是一个图像，不是真实的！）

现在我需要在视频标签中插入一个realseekbar和scriber，宽度和位置可调，如下所示。我该怎么做

这是我迄今为止的简单代码。静态图像为，视频为

视频#背景视频{
位置：固定；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
背景重复：无重复；
}

您的浏览器不支持HTML5视频。

您退房了吗

编辑：下面是一个进度条和覆盖图的示例。您可能需要搞乱元素的定位，但是您应该正确地嵌套/确定元素的范围

constplayer=document.querySelector（'.video player'）；
const video=player.querySelector（'video'）；
const progressBar=player.querySelector（'.progressBar'）；
video.addEventListener（'timeupdate'，updateProgressBar，false）；
progressBar.addEventListener（'click'，seek'）；
函数updateProgressBar（）{
var百分比=数学下限（（100/视频持续时间）*视频当前时间）；
progressBar.value=百分比；
progressBar.innerHTML=百分比+'%played'；
}
函数搜索（e）{
设百分比=e.offsetX/此.offsetWidth；
video.currentTime=百分比*video.duration；
e、 目标值=数学下限（百分比/100）；
e、 target.innerHTML=progressBar.value+“%played”；
}

。视频播放器{
位置：相对位置；
宽度：66%；
身高：66%；
}
.视频播放器img{
宽度：100%；
身高：100%；
}
.视频播放器视频{
位置：固定；
排名：0；
左：0；
最小宽度：66%；
最小高度：66%；
宽度：自动；
高度：自动；
z指数：-100；
背景重复：无重复；
}
.视频播放器.控制{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
}
.视频播放器.控件.进度条{
位置：绝对位置；
左缘：28%；
底部：10%；
颜色：橙色；
字体大小：12px；
宽度：40%；
身高：8%；
边界：无；
背景#4343；
边界半径：9px；
垂直对齐：中间对齐；
光标：指针；
}
.video player.控制进度：--moz进度条{
颜色：橙色；
背景#4343；
}
.video player.控制进度[值]：-webkit进度条{
背景色：#434343；
边界半径：2px；
盒影：0 2px 5px rgba（0,0,0,0.25）插页；
}
.video player.控制进度[值]：-webkit进度值{
背景颜色：橙色；
}

您的浏览器不支持HTML5视频。
0%播放

您的

后台重复

CSS规则被破坏，仅供参考。好的。请把它修好！覆盖图像只是一个图像。。。控制装置在哪里？我什么都没碰。这只是默认值。谢谢，但我不需要所有那些花哨复杂的选项。你能把那个特定位置的seekbar添加到我的代码中吗？这就是我需要的答案。我在寻找一个简单的解决方案。稍后我需要突出显示进度条的某些部分。@TinaJ您的代码没有显示您实现了任何自定义控件吗？请分享一个到目前为止的工作示例。@TinaJ好的，我用顶部的示例进行了更新。我忽略了元素ID，并更改了元素的嵌套度。@TinaJ宽度和高度规则如下：

.video player.controls.progress bar

@TinaJ只要确保脚本在元素之后加载，就可以了。