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