Video Won't Redirect after Played

Question

I have a video play onload of the page, and the script should redirect to another url when the video is finished playing.
Though it doesn't redirect after the video is done playing.

SCRIPT:

function playVideo(){
    var video = document.getElementById('video1');
    video.play();
    video.addEventListener('ended',function(){
        window.location = 'http://www.google.com';
    });
}

HTML:

<video id="video1" autoplay="autoplay">
    <source src="missing.mp4" type="video/mp4" />
</video>

tried every script in here. How can I redirect to a URL after a HTML video has ended?

doesn't seem to fix my issue.

I'm running on Google Chrome Version 48.0.2564.109 m

Full HTML for reference.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endi
  f]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
 <script>
    playVideo();
    function playVideo(){
      var video = document.getElementById('video1');
      video.play();
      video.onended=function(){
         window.location ='http://www.google.com';
      }
 }
 </script>
  <style>
  body {margin:0;padding:0;}
video#video1 {width:100%;height:100%;}
  </style>

</head>

<body>

<video id="video1" autoplay="autoplay">
    <source src="missing.mp4" type="video/mp4" />
</video>


</body>
</html>

What browser are you testing with? (Please include the version) — JDB, Feb 16 '16 at 04:01
If you add a `console.log` to the `playVideo` function does it show in console? I ask as you don't seem to be calling that function and instead are relying upon the video auto playing so it's not binding the event. — scrappedcola, Feb 16 '16 at 04:06
Try binding the event before you call play, if this is being called onload... — scrappedcola, Feb 16 '16 at 04:10
how to bind the event before playing? I don't know how to use JS. — MIke, Feb 16 '16 at 04:11

DDan · Answer 1 · 2016-02-16T06:06:57.417

Try with

window.location.href = 'http://www.google.com';

It could also be useful to swap the play and registering of the listener. So I would replace the js to:

function playVideo(){
    var video = document.getElementById('video1');
    video.addEventListener('ended',function(){
        window.location.href = 'http://www.google.com';
    });
    video.play();
}

Edit

I assume that your video is not running because you invoked palyVideo function but because it auto starts. Since it is not started by your function, the event listener is not registered at all.

As a simple example to prove that try without wrapping it in a function:

var video = document.getElementById('video1');
video.addEventListener('ended',function(){
    window.location.href = 'http://www.google.com';
});
video.play();

See it working in this Fiddle

score 0 · Answer 2 · answered Feb 16 '16 at 05:46

0

You can use : video.onended function(){} to make it working. May be the updated code will help you. Please try the below code

 <video id="video1">
   <source src="missing.mp4" type="video/mp4" />
 </video>

 <script>
    playVideo();
    function playVideo(){
      var video = document.getElementById('video1');
      video.play();
      video.onended=function(){
         window.location ='http://www.google.com';
      }
 }
 </script>

answered Feb 16 '16 at 05:46

Azeez Kallayi

2,567
1
15
19

still the same nothing happens – MIke Feb 16 '16 at 05:47
1

Where you put your – Azeez Kallayi Feb 16 '16 at 05:49
@MichaelPon did u try that? – Azeez Kallayi Feb 16 '16 at 05:53
@MichaelPon if you make the answer usefull, others may can also use that :) – Azeez Kallayi Feb 16 '16 at 08:47
i didn't get what you said. – MIke Feb 17 '16 at 09:31

Video Won't Redirect after Played

2 Answers2