Sergio Cv Sergio Cv - 1 month ago 13
HTML Question

go to other page after finish a video in html

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??

Answer

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 });
Comments