Reputation: 75
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
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
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