This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
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??
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 });
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";
};
Related
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
Im trying to show the current duration (print currenttime live) when the video is playing.
I did read Kurt Van den Branden answer on Detect if HTML5 Video element is playing but to no avail
i eventually want to carry the currenttime value to a php variable $currenttime
below is my current code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://action.news/videos/Britney%20Spears%20-%20Overprotected%20(2009)%20Full%20HD%201080p_60%20fps.mp4" type="video/mp4">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
#$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(vid.currentTime);
};
media.addEventListener("playing", isPlaying, false);
media.addEventListener("durationchange", isdurationchange, true);
</script>
</body>
</html>
you should be able to carry it like this , the pros will help you with syntax
document.write("<a href=/time.htm?currentTime='.media.addEventListener("timeupdate", isdurationchange, true).'>link</a>;);
listen event timeupdate instead of durationchange
(also correct your typo error as #Jeto mentions in comment)
var media = document.getElementById('myVideo');
// Playing event
var isPlaying = function(e) {
$("#output").html("Playing event triggered");
};
// durationchange
var isdurationchange = function(e) {
$("#output").html(media.currentTime);
};
media.addEventListener("playing", isPlaying, false);
// media.addEventListener("durationchange", isdurationchange, true);
media.addEventListener("timeupdate", isdurationchange, true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls>
<source src="http://fiber.westnet.ca:81/videos/Britney%20Spears%20-%20Overprotected.mp4" type="video/mp4">
</video>
I have a video play onload of the page, and the script should redirect to another url when the video is finished playing.Though it doesn't redirect after the video is done playing.
SCRIPT:
function playVideo(){
var video = document.getElementById('video1');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
HTML:
<video id="video1" autoplay="autoplay">
<source src="missing.mp4" type="video/mp4" />
</video>
tried every script in here.
How can I redirect to a URL after a HTML video has ended?
doesn't seem to fix my issue.
I'm running on Google Chrome Version 48.0.2564.109 m
Full HTML for reference.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endi
f]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
playVideo();
function playVideo(){
var video = document.getElementById('video1');
video.play();
video.onended=function(){
window.location ='http://www.google.com';
}
}
</script>
<style>
body {margin:0;padding:0;}
video#video1 {width:100%;height:100%;}
</style>
</head>
<body>
<video id="video1" autoplay="autoplay">
<source src="missing.mp4" type="video/mp4" />
</video>
</body>
</html>
You can use : video.onended function(){} to make it working. May be the updated code will help you. Please try the below code
<video id="video1">
<source src="missing.mp4" type="video/mp4" />
</video>
<script>
playVideo();
function playVideo(){
var video = document.getElementById('video1');
video.play();
video.onended=function(){
window.location ='http://www.google.com';
}
}
</script>
Try with
window.location.href = 'http://www.google.com';
It could also be useful to swap the play and registering of the listener. So I would replace the js to:
function playVideo(){
var video = document.getElementById('video1');
video.addEventListener('ended',function(){
window.location.href = 'http://www.google.com';
});
video.play();
}
Edit
I assume that your video is not running because you invoked palyVideo function but because it auto starts. Since it is not started by your function, the event listener is not registered at all.
As a simple example to prove that try without wrapping it in a function:
var video = document.getElementById('video1');
video.addEventListener('ended',function(){
window.location.href = 'http://www.google.com';
});
video.play();
See it working in this Fiddle
While I have been able to listen for the "timeupdate" event with a vanilla HTML5 player, I can't seem to get it to work with video.js.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<video id="testvid" class="video-js vjs-default-skin" controls width="640" height="480" data-setup='{}'>
<source src="testvideo.mp4" type="video/mp4">
</video>
</body>
</html>
<script>
videojs('testvid').ready(function(){
var myPlayer = this;
$(myPlayer).bind('timeupdate', function(){
console.log('the time was updated to: ' + this.currentTime);
});
});
</script>
Am I misunderstanding a basic way that video.js operates?
You actually CAN register events in callback of ready(), and it is better solution because in previous one registration of event still could be finished after ready(). Use following snippet:
videojs('example_video_1').ready(function () {
this.on('timeupdate', function () {
console.log(this.currentTime());
})
});
I have to add the event listener before the video loads. I solved the problem by changing the script to:
<script>
$('#testvid').on('timeupdate', function(){
console.log('the time was updated to: ' + this.currentTime);
});
videojs('testvid').ready(function(){
var myPlayer = this;
});
</script>
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>
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
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>
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?
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>