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

就目前而言，视频暂停正常，但图像显示在视频下方。如果我隐藏视频，图像会弹出到它应该出现的位置，所以我意识到它应用正确，但出于某种原因，视频被认为是 block 级元素，所以它的领域中的任何东西都会被撞到到“下一行”，从而摆脱定位，就像这样:

显示视频，圆圈在容器下方:

视频隐藏，圆圈显示在适当的位置:

我尝试过使用 CSS 的 z-index，尝试过绝对/相对定位，但似乎没有任何方法可以让这个东西位于视频顶部。

有什么想法吗？

Answer 1

看看这个 fiddle .

出于测试目的，我使用了示例视频和示例圆形图像。

最初图像是隐藏的。

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

希望对您有所帮助。

这是片段。

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