CODEWITHSUNDEEP
javascripthtml
zulc22
zulc22

Reputation: 337

Wait until HTML5 video has finished playing

<style>
video
{
    display:table;
    width:100%;
    height:100%;
}
</style><script type="text/javascript">
var myVideo = document.getElementsByTagName("video")[0];

myVideo.addEventListener("ended", function() {
	window.location = "http://mariopaintforums.ddns.net/secret/contin_midi/";
}, true);
</script><body><center><video src="vid.mp4" autoplay>ur brosr is no html5 coocpopabl</video></center></body>

I want to redirect to a different page when a is done playing. Is this possible?

I don't want to try to "wait" for the amount of time that the video itself occupies, because it may take a while to load and it won't finish playing correctly.

The current code with the non-working answer is above.

Upvotes: 1

Views: 3270

Answers (2)

zer00ne
zer00ne

Reputation: 43870

Give the video an id and create the event handler outside the event listener. Go to: PLUNKER and/or review Snippet below:

BTW, I noticed the code given has <style> and <script> tags before the starting tag of <body>. The only thing that should ever be before the <body> tag is it's only sibling that being the end tag of </head>. Copy the way the layout is in my demos and you should be OK. Place <style> in <head> and <script> before the closing tag of </body>.

SNIPPET 

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <h1>index.html</h1>
  <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls autoplay></video>

  <script>
    var vid = document.getElementById('vid1');
    var loc = 'http://example.com';
    vid.addEventListener('ended', function(e) {
      jumpTo(loc);
    }, false);

    function jumpTo(url) {
      window.location = url;
    }
  </script>
</body>

</html>

Upvotes: 0

merlinND
merlinND

Reputation: 855

You can listen to the ended event of the player, and perform your redirect in the callback function.

// Alternatively, use a jQuery selector to get your video element.
var myVideo = document.getElementsByTagName("video")[0];

myVideo.addEventListener("ended", function() {
    console.log("The video has just ended!");
    // Let's redirect now
    window.location = "your_new_url";
}, true);

Upvotes: 3

Related Questions