Image Over a Video (HTML5)

Place image in front of html video

Place it outside the video tags and use this style to position it:

top: 100px; left: 100px; z-index: 0; position: absolute;

Naturally, you'll need to adjust values for your specific application. If absolute positioning doesn't work for you, you can always use relative positioning, which can be more flexible. See JSFiddle for an example of positioning an image in front of a video.

How to set the thumbnail image on HTML5 video?

Add poster="placeholder.png" to the video tag.

<video width="470" height="255" poster="placeholder.png" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>

Does that work?

jQuery Overlay Image on HTML5 Video

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

How to insert an image inside a video using HTML5

This is achievable via the HTML5 Video API. Basically what you want to do is pause the video on the 36th second, overlay it with an image and then remove the image after 5 seconds and play the video again.

Here's an example of how you can do this:

var video; // acquire video

function PerformCheck() {
var curTime = parseInt(video.currentTime, 10);
if (curTime < 36) {
setTimeout(PerformCheck, 200);
} else {
video.pause();
PlayCommercial();
}
}

function PlayCommercial() {
// TODO: Display image overlay
setTimeout(ResumeVideo, 5000);
}

function ResumeVideo() {
// TODO: Remove image overlay
video.play();
}

So with the above example you start performing the checks once your video is started. If the user does that then subscribe to the video events.

video.onplay = PerformCheck();

Add a repeated image in front of a html tag video

As mentioned in the comments, put the #video-background div within the #video-wrap div. I have also adjusted some of the CSS to make it work:

#video-background {  top: 0;  left: 0;  position: absolute;  width: 100%;  height: 100%;  background-image: url('http://placehold.it/50x50');  background-repeat: repeat;  opacity: .8;}#video-wrap {  overflow: hidden;  position: relative;}#video-wrap #loop-video {  width: 100%;}
<div id="video-wrap">    <video id="loop-video" loop preload="auto" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay></video>    <div id="video-background"></div></div>


Related Topics



Leave a reply



Submit