HTML Video - Actions OnEnd not Working - javascript

I am having trouble getting the onended function to work with my HTML video. It doesnt have to be onended but basically I want a series of things to happen when the video has ended.
Code is as follows:
<script language="JavaScript" type="text/javascript">
window.onload = playVideo;
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
video.onended = function(e)
{
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video."
}
}
}
</script>
<button type="button" id="playpause" onclick="playVideo()">Play</button>
<br>
<video id="video" width="320" height="240">
<source src="Video/movie.mp4" type="video/mp4">
<source src="Video/movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br />
<textarea id="videoinfo" cols="90">
Click the Play button to start the video.
</textarea>
Thanks for the help
EDIT: I cannot post my own answer for 8 hours with 10 or less reputation, so I have to edit:
After 2 days of trying to get this to work, I post a question on here so I can figure it out. Less than 10 mins later I manage to get it to work.
I used an onEnded function in the <video> tag and linked that to a javascript function called videoEnded().
See below:
<script language="JavaScript" type="text/javascript">
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
}
}
function videoEnded()
{
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video.";
}
</script>
Hope this can help someone else out. I have searched for days looking for an answer and nothing would work.
Thanks

if(Video.ended)
// Code when video ends.
EDIT: sorry for don't give any other explanation, but, have you tried by using .addEventListener method instead? and in which Browser do you develop / debug?

Related

How to make a button that changes video's playstate?

I wanted to make a joke website and rickroll my friends, but I can only make a video autoplay with muted sounds. So I thought of making a fake cookie consent button that changes the video playstate (basically a button that plays the video)
function videoPlay() {
var video = document.getElementById('myvideo');
var btn = document.getElementById('playBtn');
if (video.paused) {
video.play();
btn.innerHTML = "Pause"
} else {
video.pause();
btn.innerHTML = "Play"
}
}
<video id="myvideo" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<button id="playBtn" onclick="videoPlay()">Play</button>

Make same button play/pause html5 video

So i had this working at one point eventually i broke it and now i need to get it working again.
I want for when you press the PLAY button the video will start playing. and the PLAY button will change it text to say PAUSE. Then when you click it again the video will pause.
HTML:
<video id="myVideo" width="1024" height="576">
<source src="myaddiction.mp4" type="video/mp4">
<source src="myaddiction.mp4.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<button id="button" onclick="playPause(); ">PLAY</button>
SCRIPT:
var vid = document.getElementById("myVideo");
function playPause() {
vid.play();
}
function playPause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
} else {
change.innerHTML = "PLAY";
}
}
Here is also a fiddle with everything in it. If you know how to get a video working in it that'd be cool if you'd add it. Thanks!
https://jsfiddle.net/wb83hydn/
**EDIT: currently the problem is the video wont play when the button is pressed. The button changes text but the video does nothing.
You are defining your playPause function 3 separate times. You are likely to get some unexpected results. That is, if the interpreter doesn't error out completely. You will be better served with just creating one function, and use a global variable to handle the tracking of the play/pause state. Something like this:
var vid = document.getElementById("myVideo");
var isPlaying = false;
function playPause() {
var change = document.getElementById("button");
if (isPlaying) {
vid.pause();
change.innerHTML = "PLAY";
} else {
vid.play();
change.innerHTML = "PAUSE";
}
isPlaying = !isPlaying;
}
Change your javascript to this to make it work.
You'll need to make sure the DOM is loaded first by using window.onLoad or putting the JS at the end of the HTML file.
I updated the JSFiddle, but you'll need a valid online video file to make it work.
var vid = document.getElementById("myVideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
play();
} else {
change.innerHTML = "PLAY";
pause();
}
}
https://jsfiddle.net/wb83hydn/3/
Play and pause video by the same button
document.getElementById("play").onclick = function() {
if(document.getElementById("video").paused){
document.getElementById("video").play();
this.innerHTML ="Pause";
}else{
document.getElementById("video").pause();
this.innerHTML = "Play";
}
}

Run a function a few seconds before video ends using JavaScript

I have a video the being played. How can I call a function 5 seconds before the end of the video?
I thought to put a timer when I start the video, the problem is that the user can control the video, and stop it and play again how many times he wants, so the timer is getting ineffective.
Examples would be very nice!
-----EDIT-----
this is an example to a code i'm using:
video = document.createElement("video");
video.setAttribute("id", id);
video.src = url;
video.onended = function(e) {
var playlistName = getPlaylistName();
findNextSongToPlay(playlistName, playNextSong);
};
I want the "onended" event to be called not in the end, but 5 seconds before..
So I need to change it a little bit..
Again, Thanks a lot!
Here is a demo for you
Edit: Updated Demo.
window.onload=function(){
video = document.createElement("video");
video.setAttribute("id", "Myvideo");
video.setAttribute("controls", "controls");
video.src = "http://www.w3schools.com/html/mov_bbb.mp4";
video.addEventListener("timeupdate", myfunc,false);
document.body.appendChild(video);
}
function myfunc(){
if(this.currentTime > this.duration-5){
//Less than 5 seconds to go. Do something here.
//---- For Demo display purposes
document.getElementById('Example').innerHTML="Less than 5 seconds to go!";
//---------
} //End Of If condition.
//---- For Demo display purposes
else{document.getElementById('Example').innerHTML="";}
//---------
}
<div id="Example"></div>
Since your player is dynamically created you can use:
video = document.createElement("video");
video.setAttribute("id", id);
video.src = url;
//Add the event Listener
video.addEventListener("timeupdate", myfunc,false);
video.onended = function(e) {
var playlistName = getPlaylistName();
findNextSongToPlay(playlistName, playNextSong);
};
and that should call this function
function myfunc(){
if(this.currentTime > this.duration-5){
//Do something here..
}
}
If you have any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
Sample with HTML5 player.
At most 100 milliseconds of difference can occur, not exactly 5 seconds.
But you can tune the script.
You can paste this code here to try it:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
<html>
<body>
<video id="vid" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var callOnce = true;
function monitorVideo() {
if ((vid.duration - vid.currentTime) < 5)
if (callOnce) {
myFunction();
callOnce = false;
}
}
function myFunction() {
console.log('5 seconds');
}
setInterval(monitorVideo, 100);
</script>
</body>
</html>
Tell us what video player you are using.
If it is custom put an id on part that says how far in to the video you are and say
if (document.getElementById("bla").innerhtml === whatever 5 seconds before the end of the video is)
function();

Show poster image or pause button when HTML5 video is paused?

Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing:
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
}//]]>
</script>
and the HTML for the video
<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4" type="video/mp4">
</video>
Another solution is to call:
video.load()
It will redisplay the poster image. it will restart the video on next interaction, but you can save the time stamp and start playing from there if you wish.
You will have to register pause event on the video.
Something like this:
JSFiddle code
Of course you should modify this for your needs and add some structure. Haven't tried it on iPad though. Also to note: registering click will introduce 300ms lag on tap event. You should look at touchstart event for touch devices and register both click and touchstart.
var overlay = document.getElementById('video-overlay'),
video = document.getElementById('video'),
videoPlaying = false;
function hideOverlay() {
overlay.style.display = "none";
videoPlaying = true;
video.play();
}
function showOverlay() {
// this check is to differentiate seek and actual pause
if (video.readyState === 4) {
overlay.style.display = "block";
videoPlaying = true;
}
}
video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);

How use 2 audio players and stop one when other is playing

So i have one audio player in my page with two play buttons, and i need to stop and play the player works with this two buttons.
I'm using html5 and js/jquery for do this, but i can't finding a way to stop audio-player 1 when i start audio-player 2, someone can help?
My jsfiddle: http://jsfiddle.net/j08691/LqM9D/9/
My 2cents, it will detect with button is clicked, and change the other one's text back to "play"
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
var second_playbutton = ($(this).attr("id") == "playpause")
? "playpause2"
: "playpause"
$("#" + second_playbutton).html("play");
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
you can just use one class name for each button and control them at one time
<button class="player-control" id="playpause">play</button>
<audio id="player">
<source src="http://96.47.236.72:8364/;" />
</audio>
<!-- here the other button that needs to start sound too -->
<button class="player-control" id="playpause2">play</button>
<script type="text/javascript">
window.player = $('#player')[0];
$('.player-control').click(function () {
if (player.paused) {
player.play();
$('.player-control').html('pause');
} else {
player.pause();
$('.player-control').html('play');
}
});
</script>

Categories