go to other page after finish a video in html

Question

I have this page:

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="miscript.js"></script>
</head>
<body>
<div align="center">
        <video id="myvideo" autoplay>
           <source src="008.mp4" type="video/mp4">
            Your browser does not support html5 videos
        </video>
</div>      
</body>
</html>

I want to see the video and when it finish i want to redirect to other page.

I´m trying with this but doesnt work.

miscript.js

document.getElementById('myvideo').addEventListener('ended',myHandler, false);
function myHandler(e) {
window.location="NewFile1.html";
};

Any idea??

Have you tried placing js code after html code? – Batu.Khan Oct 28 '16 at 07:27 — Batu.Khan, Oct 28 '16 at 07:27

Said Hasanein · Accepted Answer · 2016-10-28T07:33:14.203

jQuery:

$("#myvideo").bind("ended", function() {
   //code to run when video ended
   //redirect to http://stackoverflow.com
   window.location.replace("http://stackoverflow.com");
});

Without jQuery:

var videoObj = document.getElementById('myvideo');

videoObj.onended = function(e) {
  //code to run when video ended
  //redirect to http://stackoverflow.com
  window.location.replace("http://stackoverflow.com");
};

By adding event listener using anonymous function:

document.getElementById('myvideo').addEventListener('ended', function(e) {

    //code to run when video ended
    //redirect to http://stackoverflow.com
   window.location.replace("http://stackoverflow.com");
})

Page redirect:

  window.location.replace("http://stackoverflow.com");

or

  window.location.href="http://stackoverflow.com";

Note: Try to run this code after DOM is loaded.

 $(document).ready(function() { //Run from here });

prasanth · Answer 2 · 2016-10-28T07:42:01.657

var vid = document.getElementById("myvideo");
vid.onended = function() {

window.location.href="http://test.html/";

};

<div align="center">
        <video id="myvideo" autoplay>
           <source src="008.mp4" type="video/mp4">
            Your browser does not support html5 videos
        </video>

Try with no need apply false

document.getElementById('myvideo').addEventListener('ended',myHandler);
function myHandler(e) {
window.location="NewFile1.html";
};

go to other page after finish a video in html

2 Answers2