I need the contents of a div to display after an HTML video ends. I saw this post which is a start, but I'm lost on the actual function:
Detect when an HTML5 video finishes
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// need to show a hidden div!
}
</script>
This should do the trick... I used example "classes" and "ids" since I don't have your full source code.
//CODE
<!DOCTYPE html>
<html>
<head>
<style>
.div-hide{
display: none;
}
</style>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e){
var div = document.getElementById("selectme");
div.classList.remove("div-hide");
div.innerHTML = "I'm showing";
}
</script>
</head>
<body>
<video src="video.ogv" id="myVideo">
video not supported
</video>
<div id="selectme" class="div-hide">I'm Hidden</div>
</body>
</html>
You can hide div by id when the page loads, and show it again when video ends.
<video src="video.ogv" id="myVideo">
video not supported
</video>
<div id="divId">
Hello world!
</div>
<script type='text/javascript'>
$(document).ready(function() {
$("#divId").hide();
});
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$("#divId").show();
}
</script>
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>
<html>
<head>
<style>
</style>
<script>
$(document).ready(function(){
playVid();
$('#NextBut').hide();
$('#PrevBut').hide();
});
</script>
</head>
<body>
<video width="600" onended="myFunction()" id="myVideo">
<source src="DubImages/Malaysia ad.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function myFunction() {
setInterval(function(){ NextPage(true); }, 1000);
setInterval(function(){ $('#NextBut').show(); }, 1000);
}
</script>
</body>
</html>
This code working in a desktop browser but in mobile, it's not working, please help. playVid() I am calling once document load complete cross checks my code is correct or wrong. the function is not working.
Im trying to create a nice background video that has some text on top as well as a button that i can use to pause and unpause the video, the video works fine and loops, but i cant pause the video.
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="dudleyByDrone.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button>Pause</button>
</div>
</body>
</html>
js (I got this code from here and though it says "// only functional if "loop" is removed" i have tried removing "loop" and it still doesn't pause:
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
The following code should allow you to pause the video
$(function() {
$('#polina button').on("click", function() {
$('video')[0].pause();
});
});
EDIT: changing pause(); to play(); will do exactly what you think it will.
You need to reference the button with more specificity.
var playPause = document.querySelector("#playPause");
There are changes throughout the source playButton changed to playPause which is not the problem only a preference. An indirect selector may or may not work well with document.querySelector() since it tends to accept simple selectors more readily (from experience, not sure if it's documented.)
SNIPPET
var vid = document.getElementById("bgvid");
var playPause = document.querySelector("#playPause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
playPause.addEventListener("click", function() {
if (vid.paused) {
vid.play();
playPause.innerHTML = "Pause";
} else {
vid.pause();
playPause.innerHTML = "Paused";
}
})
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button id="playPause">Play/Pause</button>
</div>
</body>
</html>
I've created a html5 video playlist. When the page first loads I want the video to be paused, so the user has the choice to begin the autoplay sequence.
Code:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var videoPlayer= document.getElementById('video');
videoPlayer.addEventListener('ended', function(){
this.pause();
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
}, false);
}//]]>
</script>
</head>
<body>
<video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay autobuffer controls />
</body>
</html>
Jsfiddle:http://jsfiddle.net/3uRq6/7/
By the looks of it you need to reverse your logic. Remove the autoplay attribute from the <video> and on your event listener you should change the src then play the video.
http://jsfiddle.net/3uRq6/9/
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var videoPlayer= document.getElementById('video');
videoPlayer.addEventListener('ended', function(){
this.src = "http://www.mp4point.com/downloads/8feeca1a540b.mp4";
this.play();
}, false);
}//]]>
</script>
</head>
<body>
<video id="video" src="http://media.w3.org/2010/05/sintel/trailer.mp4" autobuffer controls />
</body>
</html>
Why this throws up this error:
The element or ID supplied is not valid. (VideoJS)
I know it may be obvious but there's the code:
<script type="text/javascript">
var videoPlayer = _V_("example_video_1", {}, function(){
this.addEvent("ended", function(){
alert('Here I am');
});
});
</script>
and video ID set via PHP
<?PHP
echo "<video id=\"example_video_1\" class=\"video-js vjs-default-skin\" controls width=\"".$vid_h."\" height=\"".$vid_w."\" autoplay preload=\"auto\" data-setup='{}'>";
?>
Make sure your script is after the video element it references. Otherwise your get "the element or ID supplied is not valid" because it doesn't exist at the point the script executes.
e.g.
<!DOCTYPE html>
<html>
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="360" height="202" autoplay data-setup="{}">
<source src="http://example.com/video.mp4" type='video/mp4'>
</video>
<script type="text/javascript">
var videoPlayer = _V_("example_video_1", {}, function(){
this.addEvent("ended", function(){
alert('Here I am');
});
});
</script>
</body>
</html>