How to insert an image inside a video using HTML5

Question

I'm thinking of a way to insert an advertisement image inside a playing HTML5 video. I'm new to HTML5. So, can't really come up with a way to include this feature.

If the video is 1 min long. I should be able to stop the video at 36seconds and display this image for 5 seconds and automatically move to the video.

Is there a library or any other pre-built setup for this feature?

Answer 1

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();

Answer 2

There is virtually nothing that can't be done using JavaScript.
Some suggestions:
Use Javascript to initiate a timer t1(36Sec) using setTimeout();.
Then, in the callback function,
1)Pause the Video using document.getElementById('myvideotag').pause(); (OR) Similar methods.
2)Change CSS to display the image and then start a second timer t2(5Sec) which will change the CSS of the image back to invisible/display:none
3)Play/Resume the Video using document.getElementById('myvideotag').play();

This is just a Kick starter. You have to do rest of your Homework! StackOverflow encourages you to gather required info and try it out atleast to some point