visibilitychange event latency
Categories
(Core :: Audio/Video: Playback, enhancement)
Tracking
()
People
(Reporter: zacharykosove, Unassigned)
Details
Attachments
(3 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:131.0) Gecko/20100101 Firefox/131.0
Steps to reproduce:
Injected some code to pause media when I switch tabs, using visibilitychange event listener.
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === 'hidden') {
media.pause();
} else {
media.play();
}
The previous code snippet is just an example
Actual results:
There’s a slight delay between tab switching and the visibilitychange event, an issue that doesn't occur in Chromium-based browsers.
Expected results:
The event should have been triggered instantly when I clicked off/back-on the tab.
Comment 1•25 days ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Comment 2•25 days ago
|
||
Can you :
- Go to "about:support" and copy-paste its contents here
- Share a testcase that reproduces the issue for you
Reporter | ||
Comment 3•24 days ago
|
||
Reporter | ||
Comment 4•24 days ago
|
||
Reporter | ||
Comment 5•24 days ago
|
||
Reporter | ||
Comment 6•24 days ago
|
||
Hello sorry for the duplicate files, that was a network issue on my end.
As for the test case, I used a script editor Violentmonkey/Tampermonkey.
https://hianime.to/watch/one-piece-100
I used the following script for the pause/play on visibility change.
`// ==UserScript==
// @name Example
// @namespace http://tampermonkey.net/
// @version 1.0
// @description HiAnime Pause
// @author Zach
// @match https://megacloud.tv/*
// @grant none
// ==/UserScript==
/* global jwplayer */
function waitForElement(selector, callback) {
const observer = new MutationObserver(() => {
const element = document.querySelector(selector);
if (element) {
observer.disconnect();
callback(element);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
waitForElement('#megacloud-player', () => {
const player = jwplayer();
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === 'hidden') {
player.pause();
}
else {
player.play();
}
});
});`
Description
•