How to set time duration for html video - javascript

am trying to assign time duration to the playlist.... but as am using onend that function is calling after completing that video, but what i want is the video should play only on its assigned time duration after that it should stops and next video should play..am using following code...
<video id="myVideo" height="100%" width="100%" autoplay onended="run();">
<source id="ss" src="video/video1.ogg" type='video/ogg'>
</video>
<script type="text/javascript">
// num_files++;
//alert(num_files);
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
time2= Math.round(+new Date()/1000);
function run(){
for(i=1;i<=3;i++)
{
//alert(duration[i]);
time1= Math.round(+new Date()/1000);
// alert('ctime'+time1);
dur_time=parseInt(time2,10)+parseInt(duration[i],10);
// alert('dtime'+dur_time);
video_count++;
if(time1<dur_time)
{
video_count--;
//alert(video_count);
if (video_count > num_files) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".ogg");
//alert(video_count);
video.pause();
video.load();
video.play();
time1= Math.round(+new Date()/1000);
}
}
}
</script>

You need to tap into the timeupdate event which is updated when playing the video:
video.addEventListener('timeupdate', function() {
if (this.currentTime >= dur_time) {
this.pause();
/// next action
}
}, false);
You could probably achieve the same using polling (ie. setTimeout/setInterval/requestAnimationFrame) but using the event is a more clean approach and will only update on an actual time change.
Update
You can also stop a video after a certain duration this way, however, this is not "frame accurate" but can perhaps help in some extreme cases:
var seconds = 3;
setTimeout(stopVideo, seconds * 1000); /// ms
video.play();
function stopVideo() {
if (video.isPlaying) {
video.pause();
/// next action
}
}

instead of setTimeout we can use the following code and its working fine for me
video.addEventListener("timeupdate", function() {
// alert(video_count);
dur_time=parseInt(time2,10)+7;
if (this.currentTime >= 7 || time1 >= dur_time) {
this.pause();
advanceVideo();
time2= Math.round(+new Date()/1000);
}
time1= Math.round(+new Date()/1000);
}, false);

Related

Do I have to click on the screen to play sound? How to auto active the sound after the page has loaded completely?

I have a timer with counting sound effects. However it works only if I can click on the screen before the timer has been triggered. I have tried body trigger onClick event but with no luck. Any suggestions? thanks.
HTML
<audio controls id="soundCount" class="d-none embed-responsive-item">
<source src="counting.mp3" type="audio/mp3">Your browser does not support the <code>audio</code> element.
</audio>
JS
function playSoundCount() {
document.getElementById("soundCount").load();
document.getElementById("soundCount").play();
}
function timer() {
var counter = 10;
var interval = setInterval(function() {
counter--;
if (counter <= 0) {
clearInterval(interval);
return;
}
else if(counter <= 10){
playSoundCount()
}
else{
console.log(Math.floor(counter));
}
}, 1000);
}

looping Html video from script in Javascript

I am playing video with using seekStart and seekEnd values and I want to repeat video When Video is ended,I am running below code When video is starting in 10 seconds and pause at 20 seconds video is not running again. How can I do this?
var video = document.getElementById('video');
var source = document.createElement('source');
//set Volume
document.getElementsByTagName('video')[0].volume = volume / 10;
//set src
source.setAttribute('src', fileName);
video.appendChild(source);
//set seekStart
video.addEventListener('loadedmetadata',function(){
this.currentTime = seekStart;
},false);
//set SeekEnd
video.addEventListener('timeupdate',function(){
if(this.currentTime > seekEnd){
this.pause();
}
});
//looping
video.addEventListener('ended', function () {
this.play();
}, false);
video.play();
I'm not sure how you want the seeking functionality to work, but to loop back to the start when a video ends you need to also set the time back to the start:
video.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);

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>

AngularJS show video after inactivity, hide video and reset to beginning on click

I am attempting to make a sort of screensaver using AngularJS. What I would like is to have a video pop up and start playing after a specified number of seconds after the user stops interacting with the page(not moving their mouse or clicking). Then once the video is playing, if the user clicks on the video, I want the video to pause, reset to 0:00 and then hide as well as reset the inactivity timer so that it shows and starts playing after another x number of seconds of inactivity.
I am very new to AngularJS, but here is what I have come up with so far based on my knowledge of Javascript:
(function(){
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $timeout){
$scope.videoVisible = false;
var video = $('#video1')[0];
//5 second delay
$timeout( function(){
$scope.videoVisible = true;
video.currentTime = 0;
video.load();
}, 5000 );
$scope.hideVideo = function() {
$scope.videoVisible = false;
video.pause();
video.currentTime = 0;
}
// This part should reset the timeout if the user is moving their mouse or clicking
$(document.body).bind('mousemove keydown click', RESETTIMER);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-show="videoVisible" ng-click="hideVideo()">
<video id="video1" style="width:600px;max-width:100%;" controls="">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
I had already made a similar functionality for another SO question.
SO Answer
I have modified it based on your requirements. Basically there are two functions you need to modify.
$scope.pause - which will pause the video, when the user has any activity.
$scope.play - Which will play the video when the user is inactive (for the below example, the time of inactivity is set to 5 seconds)
$scope.hide - Which hides the video player when the user has clicked on the paused video.
The most important function is.
monitorTimeout($scope.pause, 1000, 5000);
In the above function $scope.pause (1st parameter) defines the function that will run on each iteration. The 1000 (2nd parameter) signifies the number of times the first parameter is run. The final parameter signifies the timeout for the user inactivity (here it is 5 seconds), after which $scope.play is run.
Snippet
var myModule = angular.module('myApp', []);
myModule.controller("TextController", function($scope, $interval, $document, $timeout) {
$scope.videoVisible = false;
var video = $('#video1')[0];
$scope.hideVideo = function() {
$scope.videoVisible = false;
}
//function to call
$scope.pause = function() {
video.pause();
video.currentTime = 0;
console.log("user active");
};
$scope.play = function() {
$scope.videoVisible = true;
video.currentTime = 0;
video.load();
video.play();
console.log("user inActive");
}
//main function
//functionName - specify the function that needs to be repeated for the intervalTime
//intervalTime - the value is in milliseconds, the functionName is continuously repeated for this time.
//timeoutValue - the value is in milliseconds, when this value is exceeded the function given in functionName is stopped
monitorTimeout($scope.pause, 1000, 5000);
function monitorTimeout(functionName, intervalTime, timeoutValue) {
//initialization parameters
timeoutValue = timeoutValue || 5000;
intervalTime = intervalTime || 1000;
// Start a timeout
var TimeOut_Thread = $timeout(function() {
TimerExpired()
}, timeoutValue);
var bodyElement = angular.element($document);
/// Keyboard Events
bodyElement.bind('keydown', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('keyup', function(e) {
TimeOut_Resetter(e)
});
/// Mouse Events
bodyElement.bind('click', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('mousemove', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('DOMMouseScroll', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('mousewheel', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('mousedown', function(e) {
TimeOut_Resetter(e)
});
/// Touch Events
bodyElement.bind('touchstart', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('touchmove', function(e) {
TimeOut_Resetter(e)
});
/// Common Events
bodyElement.bind('scroll', function(e) {
TimeOut_Resetter(e)
});
bodyElement.bind('focus', function(e) {
TimeOut_Resetter(e)
});
function TimerExpired() {
if (theInterval) {
$scope.play();
$interval.cancel(theInterval);
theInterval = undefined;
}
}
function TimeOut_Resetter(e) {
if (!theInterval) {
theInterval = $interval(function() {
functionName();
}.bind(this), intervalTime);
}
/// Stop the pending timeout
$timeout.cancel(TimeOut_Thread);
/// Reset the timeout
TimeOut_Thread = $timeout(function() {
TimerExpired()
}, timeoutValue);
}
var theInterval = $interval(function() {
functionName();
}.bind(this), intervalTime);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TextController">
<div ng-show="videoVisible" ng-click="hideVideo()">
<video id="video1" style="width:600px;max-width:100%;" controls="">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>

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();

Categories