I try to close popup when I press Esc but it only works while video isn't on play.
$(document).bind('keydown', function (e) {
if(e.which === 27){
$('#youmax-video-lightbox').attr('src', '');
$('#youmax-lightbox').hide();
}
});
U can see in:
http://www.vigerm.com/videos
I think this is because when the user clicks on play to start the video, the flash object gets the focus and the document does not receive anymore the input events.
Not sure what you can do about it. Maybe auto-play the videos when opening the pop-up?
It has nothing to do with whether or not the video is playing. If you open the video without clicking anything else, Esc still closes it fine. It's when you click the video, events no longer bubble up to the document, so your handler is never called. You need to either stop the video from stopping event propagation or attach handlers to the video element itself as well.
Related
I've a personal website where you can listen music while reading the content. After Firefox released the 66 version with the "autoplay" blocked, I'm having a lot of problems with the audio.
By the default, the audio player it's stopped so the user has to started it (and comply with the new behaviour standard that browsers want) but I've discovered that when I click on the links and it opens in a new tab target="_blank"the audio stops playing and the canvas animation also.
But I've discovered that if I open the links with the middle button of the mouse or I use Ctrl + Click the tab opens without changing to it on the background and the audio and the animation still works and don't stop.
So, I've been trying to change the default behaviour of the left click to fire a middle button or Ctrl + Click when I click on a link but I can't make it work.
I want to detect a left click on the entire document and change the behaviour to middle buttonor Ctrl + Click (but maybe this is an ugly approach) or make a function and call it on the <a> tag with the onclick=_the_function_
At the moment, I can detect the button (Reference):
$(document).onclick(function(event) {
if (event.which === 0) or (event.button === 0) {
event.stopPropagation();
event.preventDefault();
# here I want to change the pressed button
}
});
But I don't know in which variable I have to change the value of the pressed button. Or if this approach it's not the correct way.
Regards.
You could create a custom event that sets event.button and trigger that instead when the applicable links are clicked.
Something like:
$('a.someClass').click(function(e) {
if (e.button !== 1) {
e.preventDefault();
e.stopPropagation()
console.log('Prevented left')
var evt = jQuery.Event('click', {button: 1});
$(this).trigger(evt);
}
});
How do I make it play the sound only once I tap the spacebar and not when I'm holding it down and when I'm holding it down I want it to only play it once.
// makes my character jump
if (keys.jump && is_grounded) {
yvel = jump;
// plays a cat sound when I jump problem
cat.play();
}
Your event listener should be on keydown event to play the audio.
And then on another event listener keyup event, you can remove the audio element.
I can't help you more specifically without you posting your code. Hope that helps!
Hello I have hear my script to play sound when Tab is not Active, how I can change this to play also when I'm on the Tab?
'document.addEventListener('chatLoaded', function(event) {
event.chat.audioControl.loadSoundFile('http://www.soundjay.com/misc/sounds/handbag-lock-4.mp3');
document.addEventListener('newMessage', function(event) {
var chat = event.chat;
if (!chat.isActiveTab()) {
event.chat.audioControl.play();
}
});
});'
Correct me if I'm wrong but If I got your question right and when you said "tab" you meant the browser tab, that seems pretty simple to me. All you have to do is remove the if statement, then it'll play the sound every time the event is triggered:
document.addEventListener('newMessage', function(event) {
event.chat.audioControl.play();
});
If with "tab" what you meant was an HTML element, you can use blur and focus events to keep track of focusing state. In this case there's also solutions to check about user visibility in the browser tab, which Shota Noniashvili answer is covering.
Use focus() and blur() function to detect if tab is active or not.
Or you can use page visibility API (https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)
I have a script which plays/pauses a HTML5 video based on the window size. When the user enters fullscreen, the video plays. When the user exits fullscreen, the video pauses, as expected. If you enter fullscreen again on the paused video, it will call a play and then pause immediately.
Here's the play/pause script and the console logs:
// Listen for exiting fullscreen, hide video element.
$("#" + m).on("webkitfullscreenchange", function(e) {
this.className = "hide";
if($("#" + m).get(0).paused) {
v.play();
console.log('playing...')
} else {
v.pause();
console.log('pausing...')
}
Here's a CodePen demo with representative HTML and the full script.
What can I do in my logic to prevent the second pause call being made?
I found the origin of your problem.
Here is the general structure of your code :
$(document).ready(function() {
$('.cell').on('click', function() {
// some more code ...
$("#" + m).on("webkitfullscreenchange", function(e) {
// here the code for the event handler that pauses and plays the video
});
)};
)};
You can see that the code that adds the handler on the "webkitfullscreenchange" event... is inside the handler for the .cell click event !
Here what happens : every time you click on the cell, you request the fullscreen, and you add a new event handler on the "webkitfullscreenchange" event (in jQuery, on register a new event handler, it does not replace the previous one if there was one).
The first time you click, you add the handler and you request full screen mode : it emits the event, your single handler gets it and plays the video.
But the second time you click, you request full screen mode and you add a second handler. When the event is emitted, both handlers react : the first one plays the video, and the second... immediately pauses it.
So here's part of the solution : just remove the part where you register more event handlers out of the click event handler (as a rule of thumb, situations when you have to set up handlers inside other handlers are very specific, so do not do it if you don't have any specific reason).
Why part ? Because even if it solves your first problem, it does leave another one: what happens if you click, let the video finish, and then quit full screen mode? The handler will get called, verify if the video is playing, notice that it is not and start playing it... even if you just left full screen.
So here's the final solution: set up your handler so that it checks if you just went in or out of full screen mode(using document.webkitIsFullScreen), and play or pause accordingly, as per #CBroe suggestion in the comments.
$('video').on('webkitfullscreenchange', function(e) {
if(document.webkitIsFullScreen) {
this.play();
} else {
this.className = "hide";
this.pause();
}
});
I forked your CodePen and set up the full solution if you want to have a look.
I'm making a Firefox extension to record user clicks on a website. I'm using eventListener to detect clicks on any elements on the website but for some reason clicks on input elements or dropdown options are not registered. Any idea on why this is? Here's the code for the extension:
alertClick : function(aEvent) {
document.addEventListener('click', function(e) {
window.alert("click");
}, false);
Moving to solution:
Instead of click try mouseup or mousedown. The reason is because click does not fire IF you mousedown then move your mouse too much and/or wait a long time and then do mouseup.