mercredi 1 juillet 2015

jQuery Overlay Image on HTML5 Video

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

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>

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 with image showing underneath

Video hidden, circle shows in appropriate spot: Hidden video, image shows in correct spot

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.

Any ideas?

Aucun commentaire:

Enregistrer un commentaire