support for fullscreenchange event across different browsers

I have been exploring how to add an event listener for fullscreen change in my Next.js app, and I noticed that many example codes use the webkit, moz, and ms prefixes together. However, after testing on Edge, Chrome, and Firefox, it seems that using only the 'fullscreenchange' event works just fine:

document.addEventListener('fullscreenchange', onFullScreenChange);

So, my question is: do we really need to include the other 3 variants as well?

document.addEventListener('mozfullscreenchange', onFullScreenChange);
    document.addEventListener('webkitfullscreenchange', onFullScreenChange);
    document.addEventListener('msfullscreenchange', onFullScreenChange);

Additionally, I referred to a code snippet from W3Schools, and the result was consistent - using just the 'fullscreenchange' event seemed to work fine.

<!DOCTYPE html>
<html>
... (Code provided for reference)
</html>

Answer №1

It seems that most modern browsers are now compatible with the fullscreenchange event, but it's important to remember that there are still many users out there using older computers and outdated browsers, as well as various devices like tablets, Android phones, and iPhones.

Answer №2

At present, I am in the process of developing a Tampermonkey script that can identify when a video transitions to fullscreen mode on a particular website. Through my experimentation, I have found that utilizing the fullscreenchange event suffices for some platforms, yet on others within my Chromium browser, only webkitfullscreenchange proves effective.

Evidently, the functionality varies not solely based on browser compatibility but also on the method through which a web video player activates fullscreen display.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the power of using the Apollo useMutation function within a customized React hook

I'm struggling to understand Hooks, particularly when I encounter an Invalid hook call error. The latest issue is with using the useMutation hook from Apollo within a custom hook. Can someone please help me figure out what's going wrong? Compone ...

implementing ajax form submission in codeigniter

After submitting my form, validation is checked in the JavaScript file, and then the kickerLogin() function is called. I receive an alert message of datastring. However, the data is not sent to the specified URL in the AJAX request, but the form still ge ...

retrieve nodes from xml automatically

I am facing an issue with my JavaScript code where I need to extract all data from a specific node. I want to display all the nodes labeled 'ows_Person' on my website. Currently, I can only display one 'ows_person', but I need to iterat ...

Encountering type errors in NextJS with TypeScript

I am facing an issue while trying to run this function: "use server"; export const addProduct = async (formData: FormData, imageUrl: string) => { const productName = formData.get("productName")?.toString(); const description = f ...

Conflict in the naming and scoping of IE7 and IE8

While reviewing some code, I encountered a problem in Internet Explorer 7 and 8. Despite the constructor executing properly when stepped through, upon returning I received an error stating "Object does not support this property or method." How frustrating! ...

What are the steps to resolve a Fetch request issue with a Node.js server?

I am attempting to make a simple POST request using the fetch method. I am working on building a contact form using Vanilla Javascript, HTML, and CSS on the front end, while utilizing Node.js / Express on the backend. Take a look at my front end code: ...

Next.js Clerk and NextIntl face off in a battle of Middlewares

Check out these three sample projects on GitHub: Clerk + Next-INTL. Currently not operational https://github.com/alexmeyercz/clerk-vs-next-intl-both Clerk only. Functioning properly. https://github.com/alexmeyercz/clerk-vs-next-intl-clerk-only Next-INTL o ...

The function onKeyDown is not working properly

I am currently working with a Material-UI Table and have the following code: <Table onKeyDown={event => console.log(event)}> <TableBody> ... </TableBody> </Table> Despite having the onKeyDown event listener set up, I a ...

Should using module.export = [] be avoided?

Having two modules that both need access to a shared array can be tricky. One way to handle this is by creating a separate module just for the shared array, like so: sharedArray.js module.exports = []; In your module files, you can then use it like this ...

Discrepancy in functionality between .show() and .append() methods within JQuery

I have a container with an ID of "poidiv" that is hidden (display: none) initially. My goal is to dynamically load this container multiple times using a loop, where the maximum value for the loop is not predetermined. I attempted to achieve this using jQue ...

Problem with the object identification in Prisma Client when using MongoDB

Issue with ObjectID: The hex string provided contains an invalid character '-' at index 8: "135a20ad-3244-46ed-80cf-a09a37ae4e85" for the 'id' field. I encountered an error when attempting to add a new record in my database u ...

What could be the reason for document.body.style.backgroundColor not working properly?

I am currently experimenting with a logic that triggers the screen to turn black upon pressing the print screen key. Despite changing the background color, it is not functioning as expected. The console has detected a change in value. What could be going ...

Combining package.json commands for launching both an Express server and a Vue app

I recently developed an application using Vue.js and express.js. As of now, I find myself having to open two separate terminal windows in order to run npm run serve in one and npm start in the other. My ultimate goal is to streamline this process and have ...

``When executing the `npm install` command, it does not install the sub-dependencies of a local package

I am facing an issue with my packages. One package named package-a has a dependency on another package called package-b which is not published on npm but resides in my file system. When I try to run npm install from the directory of package-a, the dependen ...

What is the best way to retrieve the current value of a header cell, including any nested headers?

My handsontable has headers that include checkboxes and select boxes. How can I access the headers to check the value of a select/checkbox inside the header cell? You can view an example in this JSFiddle (with nested headers - same as my project): http:/ ...

Using Jquery to hide or show objects within a <div> when clicked

My goal is to create a webpage that displays three different contents based on which button is clicked. Below is the code for reference: I want the page to show three specific sections: A search bar only when the 'search' button is clicked, T ...

Guide on utilizing ajax to post data when the URL parameter changes, all without refreshing the page

As the URL parameter changes, the values in my HTML also change. I am passing these values to a JSON file, but they are getting erased when the page refreshes due to the post request. I have attempted to use event.preventDefault(), however, it seems to n ...

React does not automatically re-render components created with the built-in function

I'm facing some confusion with the behavior in my code: I've created a component that should function as a menu using MaterialUI. The idea is that when a button in the menu is clicked, it becomes "active" and visually reflects this change by set ...

What is the best way to extract the lodash score from a URL using JSON parsing?

Can someone help me figure out how to extract and store the names from a URL into an array, then parse JSON data to retrieve the lodash score and convert it into a whole number? Any assistance would be greatly appreciated. <head> <title> ...

Tips for concealing scrollbar track without the use of overflow

Issue with Mystery Scrollbar A strange phenomenon is occurring on all pages every time the user reloads - a mysterious scrollbar track appears out of nowhere. Initially, there is no sign of this scrollbar track, making it even more puzzling. Despite the ...