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。

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

最初图像是隐藏的。

点击视频时，图片出现在点击完成的位置，视频暂停。

我希望这会有所帮助。

这里是sn-p。

$("#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();
});

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

<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>