CODEWITHSUNDEEP
javascripthttp-redirectvideoreplacelocation
B.Ashcroft
B.Ashcroft

Reputation: 75

Change Location After video is finished

I want this video to automatically play, once the video is finished playing, I want to have it redirect to another page, completely automatic. WITH NO CLICKING OR ANYTHING. How do I do this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>eve_</title>
<link rel="icon" rel="preload" href="images/evecircle.png" />
<style>

#video {
    margin-left:-10px;
    margin-top:-10px;
}

</style>

</head>

<body>
<script src="text/javascript">

function playVideo(){
    var video = document.getElementById('video');
    video.play();
    video.addEventListener('ended',function(){
       location.replace('https://stackoverflow.com/questions/49582133/no-idea-where-to-put-settimeout/49582203?noredirect=1#comment86172507_49582203'),
    });
}
</script>

<video controls id="video"  width="1300px" height="auto" preload="auto" autoplay="autoplay">
    <source src="images/shorteve.mp4" type="video/mp4"/>
</video>

</body>
</html>

Upvotes: 0

Views: 177

Answers (2)

ElasticCode
ElasticCode

Reputation: 7875

Make sure you call addEventListener after your HTML loaded (inside DOMContentLoaded event).

When calling document.getElementById('video') outside DOMContentLoaded event mostly it will return null.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed

document.addEventListener('DOMContentLoaded', function() {
  
  console.log("DOM fully loaded and parsed");
  var video = document.getElementById('video');

  video.addEventListener('ended', function() {
    console.log("The video has ended");
    alert("The video has ended");
    //location.replace('https://stackoverflow.com/questions/49582133/no-idea-where-to-put-settimeout/49582203?noredirect=1#comment86172507_49582203');
  });
});
<video controls id="video" width="200px" height="auto" preload="auto" autoplay="autoplay">
        <source src="https://www.w3schools.com/tags/movie.ogg" type="video/mp4" />
    </video>

Upvotes: 0

bugs
bugs

Reputation: 15323

You should be able to add an eventListener and then call your function when that is triggered.

<script type = 'text/javascript' >
  var video = document.getElementById('video');
  video.play();
  video.addEventListener('ended', onVideoFinished, false);

function onVideoFinished() {
  window.location.replace('...');
} </script>

Upvotes: 1

Related Questions