I am using the YouTube API to get the current elapsed time of a video: player.getCurrentTime(); and the player.getDuration(); functions; I have set a slider in jQuery that will have the max value set to player.getDuration and the min to 0;
Using those two functions I have built the following piece of code:
var progress = setInterval(function(){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
},1000);
that will update a slider with the elapsed time of the Youtube video.
The problem is that when I pause the video, the value of the slider flickers between an earlier value, and the current elapsed time (player.getCurrentTime()) value.
Can someone explain?
EDIT: here is the proper code that updates the slider on player play state and stops the update function on player pause state:
function playerStateChange(newState) {
globalYtState = newState;
if(newState == 0){
$("#hSongSearcher").val('').trigger('keyup');
setTimeout(playNextVideo(),1500);
}
if(newState == 2){
clearInterval(progressUpdater);
}
if(newState == 1){
progressUpdater = setInterval(function(){
//console.log(Math.floor(player.getCurrentTime()));
if(Math.floor($("#progressbar").slider('value')) != Math.floor(player.getCurrentTime())){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
}
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
}
So, this may help anyone else. I have found out that when running this piece of code:
$("progressbar").on('slidechange',function(event,ui) { ...
it seems that the ui.value flickers in my example between the current getCurrentTime() value and a maybe random value? ( I don't know exactly from where that value is! but I know a good workaround that will fix that);
SO I have made a var that holds the player current time on each second, and just pass by that random flickering value of the slider as follows:
if(newState == 1){
progressUpdater = setInterval(function(){
ctime = Math.floor(player.getCurrentTime());
$("#progressbar").slider("value", ctime);
//Here starts the flickering fix
$("#progressbar").on('slidechange',function(event,ui){
//Fix Flcikering;
if(ui.value < ctime){
$("#progressbar").slider("value", ctime);
}
});
//And here it ends.
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
Related
I'm fairly new to jQuery and I'm currently working on a slideshow.
The slideshow consists of a number of headers that plays automatically and shows an image that belongs to a specific header. The moment you hover over a title as a user, the slideshow stops playing automaticly and you have the control over the view.
The problem I encounter is that sometimes after mouseout(); the slideshow shows the wrong image. I would like the slideshow to continue from where it left off.
I have tried several things including this example: Stop loop on hover
Which is basically what I am looking for. Unfortunately I'm not yet skilled enough to apply this myself in jQuery or understand this particular code. I know I have to keep track of the loop in some way...
All help and tips are welcome, thanks!
var autoPlay = 0;
$(function() {
myCarousel();
$(".indexTitle").mouseenter(pauseCarousel);
$(".indexTitle").mouseout(playCarousel);
});
function myCarousel() {
var x = $(".indexTitle");
var n = $(".indexImage");
for (i = 0; i < x.length; i++) {
$(x[i]).removeClass("redStroke");
$(n[i]).removeClass("showIndexImage");
}
autoPlay++;
if (autoPlay > x.length && n.length) {
autoPlay = 1
}
$(x[autoPlay - 1]).addClass("redStroke");
$(n[autoPlay - 1]).addClass("showIndexImage");
myTimeOut = setTimeout(myCarousel, 2000); // Change image every 2.5 seconds
}
function pauseCarousel() {
console.log("Enter = Pause");
clearTimeout(myTimeOut);
$(".indexTitle").removeClass("redStroke");
$(".indexTitle").removeClass("showIndexImage");
};
function playCarousel() {
console.log("Exit = Play");
setTimeout(myTimeOut);
myCarousel();
};
My Fiddle: https://jsfiddle.net/L_03k/830adhfp/35/
I'm creating pinball game using Phaser Framework.
When the ball holder is pressed (please check attached screenshot so you have an idea what I mean ball holder), depending on the press speed, it should move the ball around the spiral channel. So now trying to detect the down pressed duration of the holder.
Here is my code:
var ballButton;
ballButton = game.add.sprite(196, 100, 'ballHolder');
ballButton.inputEnabled = true;
ballButton.events.onInputDown.add(inputDownAction, this);
function inputDownAction(ballButton, pointer) {
/* returns 0 */
console.log( pointer.duration);
}
So pointer.duration is not working and returns 0.
But game.input.activePointer.duration inside update() function is working and returns duration.
if (game.input.activePointer.duration > 200 && game.input.activePointer.duration < 500){
console.log('first range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 500 && game.input.activePointer.duration < 700){
console.log('second range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 700){
console.log('third range '+game.input.activePointer.duration);
}
How can I make it work for specific item/sprite? Any ideas please?
in phaser 3 something like
function update(){
var duration = 0
if( this.input.activePointer.isDown ){
duration++;
}
}
You can get the time from the scene and calculate it with the downTime from the activePointer. So, you can try this approach:
function update(time, delta){
console.log(time - window.game.input.activePointer.downTime);
}
I came to the conclusion that this is the best approach when you want to get the duration on press down key because there is not duration attribute in activePointer anymore(Phaser3). So, this code works on Phaser 3 as well.
I hope it helps!
I'm creating pinball game using Phaser Framework.
When the ball holder is pressed (please check attached screenshot so you have an idea what I mean ball holder), depending on the press speed, it should move the ball around the spiral channel. So now trying to detect the down pressed duration of the holder.
Here is my code:
var ballButton;
ballButton = game.add.sprite(196, 100, 'ballHolder');
ballButton.inputEnabled = true;
ballButton.events.onInputDown.add(inputDownAction, this);
function inputDownAction(ballButton, pointer) {
/* returns 0 */
console.log( pointer.duration);
}
So pointer.duration is not working and returns 0.
But game.input.activePointer.duration inside update() function is working and returns duration.
if (game.input.activePointer.duration > 200 && game.input.activePointer.duration < 500){
console.log('first range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 500 && game.input.activePointer.duration < 700){
console.log('second range '+game.input.activePointer.duration);
}else if(game.input.activePointer.duration > 700){
console.log('third range '+game.input.activePointer.duration);
}
How can I make it work for specific item/sprite? Any ideas please?
in phaser 3 something like
function update(){
var duration = 0
if( this.input.activePointer.isDown ){
duration++;
}
}
You can get the time from the scene and calculate it with the downTime from the activePointer. So, you can try this approach:
function update(time, delta){
console.log(time - window.game.input.activePointer.downTime);
}
I came to the conclusion that this is the best approach when you want to get the duration on press down key because there is not duration attribute in activePointer anymore(Phaser3). So, this code works on Phaser 3 as well.
I hope it helps!
I started working on advanced java few days before(too late to start on that, I know). I am stuck with a specific task of making an icon (which is present on the task bar) blink. This blinking should happen based on a specific condition, which means that it can be achieved using javascript.
I have been searching for a while now but is there a way to make an icon appear and disappear every 1 second or so to bring in the blinking effect ?
HTML
<img src='image/source' alt='blinking!' id='blinking_image' />
Javascript
var img = document.getElementById('blinking_image');
var interval = window.setInterval(function(){
if(img.style.visibility == 'hidden'){
img.style.visibility = 'visible';
}else{
img.style.visibility = 'hidden';
}
}, 1000); //the 1000 here is milliseconds and determines how often the interval should be run.
This creates an anonymous function inside the setInterval that runs every 1 second (1sec == 1000milisec). To see more about setInterval checkout the mdn here on it.
Each time it runs it checks to see if the img is hidden or visible if it's hidden then it shows it if it's visible then it hides it. It does this by checking the style.visiblity property. Which you can learn more about here on the mdn.
Small fix
instead
if(img.display == 'hidden')
use
if(img.style.visibility == 'hidden')
You might find opacity works better because the image is still there, which means it is still clickable if necessary. Also you can add a clear interval to stop the flashing.
var mycounter = 0
interval = window.setInterval(function () {
if (img.style.opacity == '0.1') {
img.style.opacity = '1';
mycounter = mycounter + 1
if (mycounter == 7) {
clearInterval(interval);
}
} else {
img.style.opacity = '0.1';
}
}, 500); //the 1000 here is milliseconds and determines how often the interval
audio element is playing with volume:
audio.setVolume(.20)
At a certain point I want to fade out the volume, rather than have it cut abruptly, so in essence I want
audio.setVolume(.15)
audio.setVolume(.10)
audio.setVolume(.05)
audio.setVolume(.03)
audio.setVolume(.01)
but there needs to be some very brief delay in between these changes so they are audible and I get my fade out effect. What is the proper way to do this?
thanks!
You could use a setInterval():
// Initial volume of 0.20
// Make sure it's a multiple of 0.05
var vol = 0.20;
var interval = 200; // 200ms interval
var fadeout = setInterval(
function() {
// Reduce volume by 0.05 as long as it is above 0
// This works as long as you start with a multiple of 0.05!
if (vol > 0) {
vol -= 0.05;
audio.setVolume(vol);
}
else {
// Stop the setInterval when 0 is reached
clearInterval(fadeout);
}
}, interval);
I would wrap the setTimeout inside of the function, as well as the options. Regarding the factor, 0.01 will be a safe value to decrease without you having to know or adjust the initial value.
function fadeVolume(volume, callback)
{
var factor = 0.01,
speed = 50;
if (volume > factor)
{
setTimeout(function(){
fadeVolume((audio.volume -= factor), callback);
}, speed);
} else {
(typeof(callback) !== 'function') || callback();
}
}
fadeVolume(audio.volume, function(){
console.log('fade complete');
});
Once the fade is complete, it will fire a callback that you can use to play the next song.
You can use this mouse key event too.
audio.on('keydown', function() {
// and here keep increasing or decreasing the volume, untill keyUp
})
As being viewed, its jQuery! You can use it for your work. Also, the audio tag is for the div, that contains the audio tag!