Redirect webpage on video completion

Question

I have a webpage that runs a fullscreen video on the landing page. I have used the timeout function of javascript to redirect the page to another link after the video ends. But the timeout shows a lot of inconsistency in different browsers. Sometimes the page redirects before the video ends and sometimes there is a slight delay.

Is there any way to avoid the use of timeout function altogether and simply redirect the page when the video has come to an end?

Possible duplicate of [Detect when an HTML5 video finishes](https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes) — showdev, Jul 11 '19 at 17:14

score 3 · Accepted Answer · answered Jul 11 '19 at 17:10

3

You can detect if an html5 video has finished playing with the ended event. (This question answers that pretty well).

So, your code would probably do something like:

document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
    window.location.href = "your-link-here";
}

answered Jul 11 '19 at 17:10

Calder White

1,287
9
21

Thanks, I shall try this – Talha Munir Jul 11 '19 at 17:21
@TalhaMunir Could you please accept my answer? Thanks. – Calder White Jul 15 '19 at 14:47

Redirect webpage on video completion

1 Answers1