Run a function a few seconds before video ends using JavaScript - 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();

Related

How can I play audio in the background but delayed?

I want to let audio play in the background, but I don't want it to start while
the page loads. Can I delay it with CSS or JS? Is this possible?
I now got this, but it still doesn't work. I think it is supposed to work.
Google Chrome shouldn't matter either right?
<audio id="audioID"
src="spraakbericht.m4a"
style="display:none/*or you can use visibility:hidden*/"></audio>
<script>
var myAudio = document.getElementById("audioID");
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 3000); // you can change this... whatever you want //
}
</script>
Hope you can help!
Yes. You can easily achieve the same using some JS.
Place audio div tag somewhere in your page. ex- div id="audio"
Execute code when you want like on button click or automatically after 30 sec or 2 minutes using setTimeout.
setTimeout( () => {
document.getElementById('song').innerHTML = 'audio id="audio-player" controls="controls" style="display: none" src="media/Blue Browne.mp3" type="audio/mpeg"';
}, (millisecond));
Note to add markup tag as I removed in the example as it's not supporting here.
Yes this is possible. You can use setTimeout function like this:
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 3000)">
<source src="music.mp3" type="audio/mp3" />
</audio>
For background audio:
var myAudio = document.getElementById("audioID");
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 3000);
}
EDIT Here is a working example for you:
<audio id="audioID"
src="http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3"
style="display:none/*or you can use visibility:hidden*/"></audio>
<script>
var myAudio = document.getElementById("audioID");
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 3000); // you can change this... whatever you want //
}
</script>

Set the current time for an audio object when a page loads

How do I set the current time for an audio object when a html page loads? This is what I am currently doing:
var a = document.getElementById("myAudio");
a.addEventListener("timeupdate", function() {
console.log(this.currentTime);
// do other stuff like display the current time
}
var isCurrentTimeSetOnStartup = false;
a.addEventListener("canplay", function() {
if (isCurrentTimeSetOnStartup == false){
this.currentTime = startTime;
isCurrentTimeSetOnStartup = true;
}
});
which I think is ugly. If I don't have the isCurrentTimeSetOnStartup guard then the two events trigger each other.
You can place your script at the bottom of the <body> tag and then use the following code to set the currentTime of your Audio Source.
let a = document.querySelector('#myAudio');
let startTime = 2;
a.addEventListener('canplay', function handler() {
// Time in seconds
this.currentTime = startTime;
// Remove the event listener
this.removeEventListener('canplay', handler);
});
a.addEventListener('timeupdate', function() {
//Time in seconds
console.log(this.currentTime);
});
// Play on DOM-Load
a.play();
<!--http://picosong.com/wwPMj/-->
<audio id="myAudio" controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
Your browser does not support HTML5 video.
</audio>

how to change vimeo video source to local mp4 video using javascript

I'm trying to make a video player which contains vimeo and local video but I'm dont know how to switch the video source to local video if the vimeo video fails to play.Im using video.js.any help please :)
here is my coding:
HTML
<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
Javascript:
videojs('vid1', { "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969" }).ready(function() {
// You can use the video.js events even though we use the vimeo controls
// As you can see here, we change the background to red when the video is paused and set it back when unpaused
this.on('pause', function() {
document.body.style.backgroundColor = 'red';
});
this.on('play', function() {
document.body.style.backgroundColor = '';
});
// You can also change the video when you want
// Here we cue a second video once the first is done
this.one('ended', function() {
this.src('http://video-js.zencoder.com/oceans-clip.mp4');
this.play();
});
i make some changes to my js but still unable to change.im new to javascript..please help me :)
Javascript:
videojs('vid2', { "techOrder": ["vimeo"], "src": "https://vimeo.com/63186969" }).ready(function() {
// You can use the video.js events even though we use the vimeo controls
// As you can see here, we change the background to red when the video is paused and set it back when unpaused
this.on('pause', function() {
document.body.style.backgroundColor = 'red';
});
this.on('play', function() {
document.body.style.backgroundColor = '';
});
// You can also change the video when you want
// Here we cue a second video once the first is done
this.one('ended', function() {
this.src('http://vimeo.com/79380715');
this.play();
});
myPlayer.src("http://video-js.zencoder.com/oceans-clip.mp4");
var myPlayer = videojs('vid2');
myPlayer.ready(function(){ /*Video is ready*/ });
myPlayer.error(function(){ /*An error happened*/ });
mpPlayer.play();
]);
So there are the 2 events:
var myPlayer = videojs('example_video_1');
myPlayer.ready(function(){ /*Video is ready*/ });
myPlayer.error(function(){ /*An error happened*/ });
More api info here : https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md

HTML Video - Actions OnEnd not Working

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?

Detect if HTML5 Video element is playing [duplicate]

This question already has answers here:
How to tell if a <video> element is currently playing?
(7 answers)
Closed 1 year ago.
I've looked through a couple of questions to find out if an HTML5 element is playing, but can't find the answer. I've looked at the W3 documentation and it has an event named "playing" but I can't seem to get it to work.
This is my current code:
var stream = document.getElementsByTagName('video');
function pauseStream() {
if (stream.playing) {
for (var i = 0; i < stream.length; i++) {
stream[i].pause();
$("body > header").addClass("paused_note");
$(".paused_note").text("Stream Paused");
$('.paused_note').css("opacity", "1");
}
}
}
It seems to me like you could just check for !stream.paused.
Check my answer at How to tell if a <video> element is currently playing?: MediaElement does not have a property that tells if it is playing or not. But you could define a custom property for it.
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
Now you can use it on video or audio elements like this:
if(document.querySelector('video').playing){
// Do anything you want to
}
Note : This answer was given in 2011. Please check the updated documentation on HTML5 video before proceeding.
If you just want to know whether the video is paused, use the flag stream.paused.
There is no property for a video element in getting its playing status. But there is one event "playing" which will be triggered when it starts to play. An Event called "ended" is also triggered when it stops playing.
So the solution is:
Declare one variable videoStatus.
Add event handlers for different events of video.
Update videoStatus using the event handlers.
Use videoStatus to identify the status of the video.
This page will give you a better idea about video events. Play the video on this page and see how the events are triggered.
http://www.w3.org/2010/05/video/mediaevents.html
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
Add eventlisteners to your media element. Possible events that can be triggered are: Audio and video media events
<!DOCTYPE html>
<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 autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
media.addEventListener("playing", function() {
$("#output").html("Playing event triggered");
});
// Pause event
media.addEventListener("pause", function() {
$("#output").html("Pause event triggered");
});
// Seeking event
media.addEventListener("seeking", function() {
$("#output").html("Seeking event triggered");
});
// Volume changed event
media.addEventListener("volumechange", function(e) {
$("#output").html("Volumechange event triggered");
});
</script>
</body>
</html>
Best approach:
function playPauseThisVideo(this_video_id) {
var this_video = document.getElementById(this_video_id);
if (this_video.paused) {
console.log("VIDEO IS PAUSED");
} else {
console.log("VIDEO IS PLAYING");
}
}
I encountered a similar problem where I was not able to add event listeners to the player until after it had already started playing, so #Diode's method unfortunately would not work. My solution was check if the player's "paused" property was set to true or not. This works because "paused" is set to true even before the video ever starts playing and after it ends, not just when a user has clicked "pause".
You can use 'playing' event listener =>
const video = document.querySelector('#myVideo');
video.addEventListener("playing", function () {
// Write Your Code
});
Here is what we are using at http://www.develop.com/webcasts to keep people from accidentally leaving the page while a video is playing or paused.
$(document).ready(function() {
var video = $("video#webcast_video");
if (video.length <= 0) {
return;
}
window.onbeforeunload = function () {
var htmlVideo = video[0];
if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) {
return null;
}
return "Leaving this page will stop your video.";
};
}
a bit example
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}
I just looked at the link #tracevipin added (http://www.w3.org/2010/05/video/mediaevents.html), and I saw a property named "paused".
I have ust tested it and it works just fine.
This is my code - by calling the function play() the video plays or pauses and the button image is changed.
By calling the function volume() the volume is turned on/off and the button image also changes.
function play() {
var video = document.getElementById('slidevideo');
if (video.paused) {
video.play()
play_img.src = 'img/pause.png';
}
else {
video.pause()
play_img.src = 'img/play.png';
}
}
function volume() {
var video = document.getElementById('slidevideo');
var img = document.getElementById('volume_img');
if (video.volume > 0) {
video.volume = 0
volume_img.src = 'img/volume_off.png';
}
else {
video.volume = 1
volume_img.src = 'img/volume_on.png';
}
}
I just did it very simply using onpause and onplay properties of the html video tag. Create some javascript function to toggle a global variable so that the page knows the status of the video for other functions.
Javascript below:
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Html video tag:
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
than you can use onclick javascript to do something depending on the status variable in this case videoPlaying.
hope this helps...
My requirement was to click on the video and pause if it was playing or play if it was paused. This worked for me.
<video id="myVideo" #elem width="320" height="176" autoplay (click)="playIfPaused(elem)">
<source src="your source" type="video/mp4">
</video>
inside app.component.ts
playIfPaused(file){
file.paused ? file.play(): file.pause();
}
var video_switch = 0;
function play() {
var media = document.getElementById('video');
if (video_switch == 0)
{
media.play();
video_switch = 1;
}
else if (video_switch == 1)
{
media.pause();
video_switch = 0;
}
}
I just added that to the media object manually
let media = document.querySelector('.my-video');
media.isplaying = false;
...
if(media.isplaying) //do something
Then just toggle it when i hit play or pause.
a bit example when playing video
let v = document.getElementById('video-plan');
v.onplay = function() {
console.log('Start video')
};

Categories