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 specifi

Solution 1:

Check out this fiddle.

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

Initially the image is hidden.

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

I hope this helps.

Here is the snippet.

$("#vid").click(function(e) {

  //height and width of the containervar height = $("#pcVideo").height();
  var width = $("#pcVideo").width();

  //get click position inside containervar relativeX = e.pageX - this.offsetLeft;
  var relativeY = e.pageY - this.offsetTop;

  $('#image').css(
    "left", relativeX - 25);
  $('#image').css(
    "top", relativeY - 25);
  $('#image').show();
  //overlayvar video = document.getElementById('vid');

  video.pause();
});

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><divid="container"><videoid="vid"src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"width="500"heigh="400"preload="auto"controls></video><imgid="image"src="http://www.gritengine.com/luaimg/circle.png" /></div>