HTML5视频上的jQuery叠加图像 [英] jQuery Overlay Image on HTML5 Video

问题描述

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

I am trying to build a small utility where someone can start watching an HTML5 video (not YouTube - this will stream from the same server the site is hosted on), click in a specific area of the video, have it pause and put a small circle on the video where they clicked. Once that occurs, a small window will pop up so the user can comment indicating why they clicked there (something wrong in the video, etc.).

基本的HTML结构是这样的：

The basic HTML structure is this:

<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（处理点击视频的时间）是：

The custom styling can be ignored - that was just to center the video on the screen with a generic height/width that won't be used later. The JS on the page (to handle when the video is clicked) is this:

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

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

As it stands, the video pauses fine, but the image shows up below the video. If I hide the video, the image pops in right where it is supposed to, so what I've realized is it is applying correctly, but for some reason the video is considered a block-level element, so anything in its realm gets bumped to the "next line" as it were, thus throwing positioning off, like so:

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

Video shown, circle is below container:

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

Video hidden, circle shows in appropriate spot:

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

I've tried z-index with CSS, tried absolute/relative positioning and nothing seems to work to get this thing over top of the video.

任何想法？

推荐答案

看看这个小提琴。

我使用了一个示例视频和一个示例圈子用于测试目的的图像。

I have used a sample video and a sample circular image for testing purpose.

最初隐藏图像。

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

When you click on the video, the image appears at the position where the click is done and the video pauses.

我希望这会有所帮助。

以下是摘录。

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

这篇关于HTML5视频上的jQuery叠加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！