jQuery 在 HTML5 视频上叠加图像

Question

我正在尝试构建一个小型实用程序，让人们可以开始观看 HTML5 视频（不是 YouTube - 这将从托管网站的同一台服务器流式传输），单击特定区域视频，让它暂停并在他们点击的视频上放一个小圆圈。一旦发生这种情况，一个小 window 将弹出，以便用户可以评论说明他们点击那里的原因（视频中有问题，等等）。

基本的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>

可以忽略自定义样式 - 这只是为了使用以后不会使用的通用 height/width 使视频在屏幕上居中。页面上的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();
});

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

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

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

我已经用 CSS 尝试过 z-index，尝试过 absolute/relative 定位，但似乎没有任何方法可以让这个东西超过视频。

有什么想法吗？

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>

jQuery 在 HTML5 视频上叠加图像

jQuery Overlay Image on HTML5 Video

html

css

jquery

overlay

html5-video