Currently working on a page containing a video that has to be paused at certain points (like chapters). So I made a function that will stop the video when it hits the next "time marker" which looks like this:
function vidPause(nextMarker){
var timeMarker = nextMarker;
if(videoPlayer.currentTime >= timeMarker) {
videoPlayer.pause();
videoPlayer.removeEventListener('timeupdate', vidPause());
}
};
And I'm trying to fire it this way:
videoPlayer.addEventListener('timeupdate', vidPause(nextMarker));
But it only seems to fire when the video is loaded. Nothing happens when the video is playing (tested by using a console.log(videoPlayer.currentTime); inside the vidPause function).
Note: I need the function to be called that way so that I can remove the event listener when it hits the time marker, that way it won't stop when the user wants to play the video from that point on.
Thanks in advance for any suggestions!
The function is being called once in the addEventListener line, but that's not actually passing it as a callback.
Try this:
function videoUpdate(e) {
vidPause(nextMarker, videoPlayer.currentTime;); // Now call your function
}
function vidPause(nextMarker, timeStamp){
var timeMarker = nextMarker;
if (timeStamp >= timeMarker) {
videoPlayer.pause();
videoPlayer.removeEventListener('timeupdate', videoUpdate);
}
};
videoPlayer.addEventListener('timeupdate', videoUpdate); // Note no brackets, as it's passing a ref to the function rather than calling it
I don't know what the scope of nextMarker is, but you should be able to start console logging and find out.
Related
I'm trying to make a "cookie clicker" like game where I need to play a sound every time the clicker has been clicked. My problem is that the new Audio and the audio.play are in two separate functions (with global variables), which causes a delay from click to sound.
Are there any way to get rid of the delay, without moving them to the same function?
Here is where the audio is being defined:
[].forEach.call(document.getElementById('skins').children, function(e) {
e.onclick = function () {
klikketskin = this.id;
clicklyd = new Audio(`Medier/Lyd/Clicker/${klikketskin}.mp3`); }
Here's where it's played (later in the script):
function clickevent() {
clicklyd.play(); }
How it is now (turn on sound):
https://imgur.com/a/2vf4NWG
What i want (turn on sound):
https://imgur.com/a/x4wYFq2
Tank You! :D
You should reset the currentTime property back to 0 which will let the sound replay from the start, before calling play() again.
function clickevent() {
clicklyd.currentTime = 0;
clicklyd.play();
}
However this will cut off the previous sound if it's not finished yet.
I am making a game by js and pixi.js, I am having a trouble in pass parameters for function. The code below
newGame()
{
// Some code before, then I get the audio which I want to play
let audio = this.soundsArray[this.shuffleQuestionsInLevel[this.rightAnswer].sound];
// Auto play audio at the begining of game
this.playSound(audio);
// Click to repeat the sound
this.soundBtn.on('pointerdown', this.playSound.bind(this, audio));
}
// Play audio after 5 seconds
playSound(audio)
{
setTimeout(() => audio.play(), 5000);
}
At the first game, everything works perfectly, the exactly sound be played. However, from the second game, the click event this.soundBtn.on('pointerdown', this.playSound.bind(this, audio)); play all the sound in the pass, it mean in the 2nd game, there are 2 sounds be played, in the 3rd game, there are 3 sounds be played.
The code to auto play audio at the begining this.playSound(audio) work well every time. Only sound in this game be played.
I do not know why I call the same function and pass the same parameter but only the code to auto play audio work. I want the click event work exactly like that. Anyone know what's the problem? Thank you.
It looks like you are attaching the event handler when you start a game (when you call newGame(), but you are never detaching it:
// This line attaches the handler, but it attaches a new handler everytime!
this.soundBtn.on('pointerdown', this.playSound.bind(this, audio));
// To understand why, let's write it more explicitly
//
// First a new "listener" function is created from this.playSound by calling bind
const listener = this.playSound.bind(this, audio);
// Then this function is attached as an event handler
this.soundBtn.on('pointerdown', listener);
// But since listener is not the same function as this.playSound anymore
// (because .bind produces a new function) the following line will not work
// and listener will stay attached
this.soundBtn.off('pointerdown', this.playSound);
In order to fix the problem you will most probably need to store the listener function somewhere so that you can detach it later:
newGame() {
// ...
this.__playAudio = this.playAudio.bind(this, audio);
this.soundBtn.on('pointerdown', this.__playAudio);
}
// And then when the game is over
this.soundBtn.off('pointerdown', this.__playAudio);
Or, if the soundBtn supports it, just detach all the pointerdown handlers when a game is over:
this.soundBtn.off('pointerdown');
I am new to javascript, and I am coding a game.
I would like to break out of the setInterval loop when a condition is met to display a game over screen. My code :
var timer = 0;
var i =0;
fond.onload= function()
{
timer = setInterval(boucle,50);
console.log("break");
}
function boucle()
{
i++;
if(i===4)
{
clearInterval(timer);
}
}
I never reach the break log because just after the clearInterval, the screen is stuck.
Thank you!
I am not sure what fond.onload represents in your code, but if you want the code to run when the page is loaded you should use window.onload or document.onload.
onload is a global event handler bound to all objects that gets executed when that object is loaded. I presume that in your case fond is never loaded as the rest of the code is fine, just never runs. It will run fine if you bind the function to window.onload.
You can read up more on that here
According to the vimeo js-api doc, the event finish - Fires when the video playback reaches the end.
For some reason, I can't get this to work, the finish event always calls immediately, am I doing something wrong?
I am trying to make an embedded video disappear when it is finished playing. I have followed this example by Drew Baker but simply cannot get the finish event to call properly.
I have made a very straightforward jsbin here to demonstrate the issue.
This behaviour seems to be occurring on Safari, Chrome and Firefox (on mac).
--
JS Code from JSBIN:
$(document).ready(function() {
$('iframe.vimeo').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(playerID){
Froogaloop(playerID).addEvent('play', play(playerID));
Froogaloop(playerID).addEvent('seek', seek);
Froogaloop(playerID).addEvent('finish', onFinish(playerID));
Froogaloop(playerID).api('play');
}
function play(playerID){
alert(playerID + " is playing!!!");
}
function seek() {
alert('Seeking');
}
function onFinish(playerID) {
alert(playerID + " finished!!!");
$('#'+playerID).remove();
}
});
You are executing functions instead of passing the function reference to the addEvent method.
Froogaloop(playerID).addEvent('play', play);
Froogaloop(playerID).addEvent('seek', seek);
Froogaloop(playerID).addEvent('finish', onFinish);
Note that Froogaloop passes the playerID as an argument to the play callback function, I'm not certain that it passes the playerID as an argument to the finish callback function (although I'm guessing it probably does).
I am trying to write a script so that when I play an embedded sound object, a picture that I also have embedded will change.
function changePic() {
document.getElementById("sound").onclick = transform(document.getElementById("pic"));
}
function transform (pic) {
pic.src = "";
alert ("done");
}
The problem is that when I load the page, the Javascript code automatically runs even though I don't click play (autostart is set to false) on the sound object. Does anyone have an idea as to what is causing this?
When you write onclick = transform(...), you're calling transform and assigning the result to onclick.
You need to set the handler to an anonymous function that calls transform, like this:
document.getElementById("sound").onclick = function() {
transform(document.getElementById("pic"));
};
However, this is the wrong way to add events.
You should call element.addEventListener / element.attachEvent. (or just use jQuery)