Situation
I am currently embedding a YouTube iframe on my page and am loading it on top of a popup modal. When I press 'ESC', I can close out the popup modal but if the user has their tab-focus on something within the YouTube player, the browser is no longer able to detect if the user is hitting 'ESC' to try and close the popup modal. This is definitely an A11y issue.
Problem to Solve Is there any way to detect if a user hits the 'ESC' key while the focus is trapped within the player? There are event emitters for playerStateChange, quality change, etc but I didn't see anything for keypresses.
Solutions Considered Already but Rejected:
Blocking the user from focusing on the YouTube iframe and creating custom buttons/controls outside of the player to handle controls - this is too cumbersome of a solution that requires styling buttons and controls
Bouncing focus back to window on player state change - moving focus unexpectedly is an a11y problem but also not every case of user focus trap can be covered with the current event emitters built into the YouTube API.
Any help/guidance is greatly appreciated!
Related
I've been refactoring some javascript.
Previously, I had an HTML element open to Fullscreen when the user clicked on another element.
Now clicking the latter element initiates a server-side verification, instead.
Once the server-side verification check passes, the page reloads with extra data confirming the user is verified.
N.B. When the page reloads, it does so with a non-negligible amount of extra markup, styles, scripts and vectors. The reason I am re-factoring in the first place is to avoid the need to download all these extra assets (and keep them in the background, on standby) unless and until the user authenticates themselves
The first thing I discovered is that I cannot have the page reload and then have the HTML element immediately open to Fullscreen, because - and this seems entirely reasonable from a UX perspective, Firefox reports:
Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.
Essentially, unless the user pro-actively interacts with the page, the Fullscreen API will not run.
(In this scenario, the user pro-actively interacted with the page before reload, which is not the same thing.)
So, I thought about it and then added:
document.body.addEventListener('mousemove', () => myElement.requestFullscreen(), {once: true});
Nope. The Fullscreen API still doesn't activate.
To check that I wasn't making an elementary error somewhere else, I tried:
document.body.addEventListener('click', () => myElement.requestFullscreen(), {once: true});
Which does work.
So: some user-interactions will successfully fire the Fullscreen API and others won't.
I have searched through the WHAT-WG HTML Spec but I cannot find a list of events which represent explicit and pro-active user-interactions on a webpage.
Does such a list exist?
Which other events apart from click will successfully activate the Fullscreen API?
Which JS events apart from click will successfully activate the Fullscreen API?
A small number of events will successfully activate the Fullscreen API.
Almost all of these events either imply a user-click or directly reference one:
change
click
contextmenu
dblclick
mouseup
pointerup
reset
submit
touchend
Further to the list of click-based events above, the Fullscreen API may also be activated via:
ScreenOrientation.onchange
Source:
https://www.aworkinprogress.dev/request-fullscreen
I'm trying to figure out if a video was played/paused via play() and pause() javascript methods.
I thought I could achieve this by observing the 'play' and 'pause' events checking if isTrusted was false. Up to no avail, this always comes true.
Is there any way for me to know if a video was played or paused due to an user interaction?
Fiddle
__
extra:
I have even tried videoElement.dispatchEvent(new MouseEvent('click')) but this doesn't seem to trigger the play/pause events of the video
As mentioned in the comments there are two separate things you can observer here:
changes in video state
user interactions, via mouse clicks etc
user interactions via the keyboard using the 'onkeydown' (replaces the deprecated 'keypress' event)
You may want to monitor and relate all for completeness but the simplest way would seem to be to simply monitor clicks of the UI Play/Pause button itself.
If you are able to use a HTML5 video player for your solution rather than the 'raw' view tag, you can leverage it's event handling for the UI which may be more convenient. For example for VideoJS you have the ClickableComponent (https://docs.videojs.com/clickablecomponent#handleKeyDown):
handleKeyDown(event). button.js, line 107
This gets called when a Button has focus and keydown is triggered via a key press.
For some interactive graphics we are using canvas in our HTML page. Inside the canvas we have "link-like" controls to link users to external resources.
Because of canvas, we do NOT use <a href=""> tag, but we are opening new browser tab via JS code, like this:
this.pixiLayout.App.renderer.view.addEventListener('click', () => {
if (this.pixiLayout.externalUrl) {
window.open(this.pixiLayout.externalUrl, '_blank');
}
});
The problem:
Google Analytics(front end) show us much more clicks than actual "page views" analytics from third party resources, up to 10-20 times.
It means that users clicked on the link(and it recorded by GA), but by some reason, link was not opened, or opened but not loaded in a new tab.
I know about ad/pop-ups blockers. It could be a case for some percentage of users. But it is not a case for 90% of users, like we have.
And we could not reproduce this behaviour on any device we own.
Question:
Could it be caused by normal browser policy or restriction that could cause a blocking of new tab like in our case?
Could it be like "new feature" of modern browsers I do not know about yet?
Ok, the issue was in our own code. Event firing of GA(we use custom events) was implemented in the different place of the code than an actual action - window.open(). They were supposed to be called on the same user action - user click. But it was not a case, specially for mobile devices. When user tapped on that interactive, link-like control and moved finger up or down(for scrolling), it fired custom event responsible for tracking "the click". But actual "click" event is not fired in this case.
Conclusion: never ever do an actual action in one place and "collect analytics of that action" in another place of the code.
I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.
It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).
Is it possible to know when user click on advertisement on youtube video?
We used youtube api v2 in our website, and user can watch videos.
Problem : when user click on advertisement , youtube video pause automatically.
My Task is to make youtube video continuously play even if user click on advertisement,
It should only pause when user click on pause button.
is there any solution?
To do this you need to capture the event (click) prior to the handler being fired.
If these are two separated handlers then you probably CAN do this. Just find/remove the one handler on page load. Or you may be able to insert a lower-level handler that just stops the event from propagating upwards.
IF the event handler that launches the ad also pauses the video, then no you can't keep the video playing while the user is in an ad. However, you may be able to add a second handler that ALSO launches, which resumes the video. It'll result in a hiccup, but users probably won't complain.