HTML5视频上的jQuery覆盖图像

我正在尝试建立一个小的实用程序，人们可以开始观看HTML5视频（而不是YouTube-这将从网站所在的同一服务器上播放），点击视频的特定区域，让它暂停，并在他们点击的视频上画一个小圆圈。一旦出现这种情况，就会弹出一个小窗口，这样用户就可以发表评论，指出他们为什么点击那里（视频中有错误，等等）

基本HTML结构如下所示：

看看这个

我使用了一个视频样本和一个圆形图像样本进行测试

最初，图像是隐藏的

单击视频时，图像显示在单击完成且视频暂停的位置

我希望这有帮助

下面是片段

$（“#vid”）。单击（函数（e）{
//容器的高度和宽度
变量高度=$（“#pcVideo”）.height（）；
变量宽度=$（“#pcVideo”）.width（）；
//获取容器内的单击位置
var relativeX=e.pageX-this.offsetLeft；
var relativeY=e.pageY-this.offsetTop；
$（'#image'）.css(
"左",右(25),；
$（'#image'）.css(
"顶尖",相对性-25),；
$（'#image'）.show（）；
//覆盖层
var video=document.getElementById（'vid'）；
video.pause（）；
});
#图像{
位置：绝对位置；
显示：无；
}
#视频{
位置：绝对位置；
}
div{
宽度：100%；
}

如果没有一个实际的JSFIDLE或其他东西进行实验，我不能肯定，但是您是否尝试过将视频设置为显示：绝对？这太完美了！我对它做了一些小的修改，因为我必须支持多个图像（例如，将它们添加到视频中，并根据时间删除它们），但这使我达到了需要的程度。谢谢