How can I redirect to a URL after a HTML video has ended?

Question

I am trying to redirect to a different URL after a html video has ended. This cannot be using a FLASH player as it won't work on iOS devices. Any help or direction will be appreciated. Here is my code:

<head>
<script type="text/javascript">
    myVid = document.getElementById("video1");
    function redirect()
    { 
        if (myVid.ended == true) {
            window.location = "http://www.google.com";
        }
</script>
</head>
<body> 
    <video id="video1" controls="controls">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</body>

`myVid.addEventListener('onended', function(e) { window.location.href = 'http://www.google.com'; }); `? — putvande, Nov 15 '13 at 19:14

Hichem · Accepted Answer · 2013-11-15T20:15:30.330

4

set the id of your video to 'myvid' and here is the solution

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

here is the demo

edited Nov 15 '13 at 20:15

answered Nov 15 '13 at 19:21

Hichem

1,111
11
30

I am still a little stuck. The video did not redirect after it was finished playing. – CAI_Innovator Nov 15 '13 at 19:37
@CAI_Innovator let me know for this – Hichem Nov 15 '13 at 20:16
@CAI_Innovator on jsfiddle can not redirect but ir works fine i have tested it – Hichem Nov 15 '13 at 20:17
@K3mel31 Thank you I got it to work. It was a matter of moving the script out of the head tag and into the body tag. I appreciate your help. – CAI_Innovator Nov 16 '13 at 20:19

score 0 · Answer 2 · answered Nov 15 '13 at 19:24

use window.location.replace('http://www.google.com'); so user dosnt get stuck in back button loops

<script>
    var video1 = document.getElementsByTagName('video1')[0];

    video1.onended = function(e) {
        window.location.replace('http://www.google.com');
    }
</script>

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

Javascript:

 document.getElementById('video-id').addEventListener('ended',function(){
     window.location.href = 'http://www.your-url.com';
 },false);

jQuery:

  $("#video-id").on("ended", function() {
       window.location.href = 'http://www.your-url.com';
    });

Youtube:

How to detect when a youtube video finishes playing?

edited May 23 '17 at 12:07

Community

1
1

answered Nov 15 '13 at 19:27

HIRA THAKUR

17,189
14
56
87

this code is perfectly working on chrome and edge but why it is not working on firefox??? – Tanmay Patel Oct 07 '22 at 06:10

score 0 · Answer 4 · answered May 06 '22 at 06:22

This worked for me :

<script>
  function videoEnded() {
      location.href="https://www.google.com";
   }
</script>

<video id="myVideo" width="640" height="480" controls autoplay onended="videoEnded()">
  <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

How can I redirect to a URL after a HTML video has ended?

4 Answers4

Linked