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
HTML5 Canvas Scrolling Vertically and Horizontally
Adjusting and Image Size to Fit a Div with Bootstrap
Vertical Align Text After Font Icon
Assign Variables to Child Template in {% Include %} Tag Django
Table's Border-Radius Does Not Function as Expected
CSS Circular Cropping of Rectangle Image
Textarea to Fill a Parent Container Exactly, with Padding
How Does a Multiple Select List Work with Model Binding in ASP.NET Mvc
CSS Override Rules and Specificity
How to Make New Heading Tag Numbers, Such as H7, H8, etc.
Set Div to Remaining Height Using CSS with Unknown Height Divs Above and Below
Increase Cursor Size in HTML Body
iOS 7 - CSS - HTML Height - 100% = 692Px
Should I Use The <P /> Tag in Markup
Text-Overflow: Ellipsis in Table-Cell Without Width