HTML5视频上的jQuery叠加图像

Question

我正在尝试构建一个小型实用程序，有人可以开始观看HTML5视频（不是YouTube - 这将从托管该网站的同一服务器流式传输），点击视频的特定区域，暂停和在他们点击的视频上放一个小圆圈。一旦发生这种情况，就会弹出一个小窗口，以便用户可以评论他们点击的原因（视频中出现错误等）。

基本的HTML结构是：

<div id="videoContainer" style="margin-left: auto; margin-right: auto; height: 550px; width: 950px; background-color: #fff">        	
    <video id="pcVideo" src="fvb0375.mov" style="margin-left: auto; margin-right: auto; height: 550px; width: 950px; display:inline;" preload="auto" controls></video>
</div>

可以忽略自定义样式 - 这只是为了使视频在屏幕上居中，具有通用的高度/宽度，以后不再使用。页面上的JS（用于处理点击视频的时间）是：

$("#pcVideo").click(function(e) {

  //height and width of the container
  var height = $("#pcVideo").height();
  var width = $("#pcVideo").width();

  //get click position inside container
  var relativeX = e.pageX - this.offsetLeft;
  var relativeY = e.pageY - this.offsetTop;

  //overlay
  var overlay = $("<div height='75' width='75' class='overlay'/>");
  overlay.offset({
    top: relativeY,
    left: relativeX
  });
  var circle = $("<img/>");
  circle.attr('src', 'circle.png');
  overlay.append(circle);

  $("#videoContainer").append(overlay);

  video.pause();
});

目前，视频暂停播放，但图片显示在视频下方。如果我隐藏视频，图像会弹到正确的位置，所以我意识到它正确应用，但由于某种原因，视频被视为块级元素，因此其境界中的任何内容都会被撞击到了“下一行”，因此抛出了定位，如下：

显示视频，圆圈位于容器下方：

视频隐藏，圈子显示在适当的位置：

我已经尝试了使用CSS的z-index，尝试了绝对/相对定位，似乎没有任何工作可以将这个东西放在视频之上。

有什么想法吗？

Answer 1

查看此fiddle。

我使用了一个示例视频和一个示例圆形图像进行测试。

最初隐藏图像。

当您点击视频时，图像会显示在点击完成位置并且视频暂停。

我希望这会有所帮助。

以下是摘录。

＆＃13;

＆＃13;

$("#vid").click(function(e) {

  //height and width of the container
  var height = $("#pcVideo").height();
  var width = $("#pcVideo").width();

  //get click position inside container
  var relativeX = e.pageX - this.offsetLeft;
  var relativeY = e.pageY - this.offsetTop;

  $('#image').css(
    "left", relativeX - 25);
  $('#image').css(
    "top", relativeY - 25);
  $('#image').show();
  //overlay
  var video = document.getElementById('vid');

  video.pause();
});

＆＃13;

#image {
  position: absolute;
  display: none;
}
#vid {
  position: absolute;
}
div {
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
  <video id="vid" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="500" heigh="400" preload="auto" controls></video>
  <img id="image" src="http://www.gritengine.com/luaimg/circle.png" />
</div>

＆＃13;

＆＃13;

＆＃13;