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

Compare the current return value to the previous value in the success callback of an Ajax request

I am currently running an Ajax request to a PHP DB script every 3 seconds, and I need to make a decision based on the result returned. The result is a timestamp. Let's say the ajax request is fired two times. I want to compare the first result with th ...

Using Vue's computed property setter with an object as a prop

I have a new concept for an input component where different objects can be passed, displayed as CSV, and allow for text editing/validation with style changes based on validation results. Check out the code snippet I've been working on: <div id=&quo ...

The process of saving report filters and making them accessible for both running and scheduling tasks

I am facing a use case where I need to add query parameters to API calls and save them for future use. Essentially, I have a report that requires multiple filters to be saved - some predefined and others customizable. These saved filters can then be execut ...

Utilizing Grunt to streamline a personalized project

I have set up Grunt as my "JS Task Runner". Node.js is installed in the directory "C:/Program Files". NPM has been installed in C:/users/Peterson/appdata/roaming/npm. Inside the npm folder, I have Grunt, Bower, and Grunt-cli. I am working on a pro ...

Utilizing AJAX to showcase an HTML popup

I am currently working on a project to create an HTML page that will display another HTML file in an alert when a button is pressed. However, I am facing an issue where the content is not being displayed as expected. <html> <head> ...

Error with JSON data from the Twitch TV API

I am having trouble with the Twitch API. When a streamer is live, I work with the "Stream" property, but if they are not streaming, I need to refer to another link. I use the getJSON function to fetch the necessary API link and work with it. However, my lo ...

How can I set the input tag to reset back to 1 when a certain event occurs?

I am currently developing an HTML Snakes And Ladders game. On the settings screen, there is an input field where users can select the size of the board. Depending on their choice, they will be able to choose a maximum number of snakes and ladders. For exa ...

Converting a nested JSON object into a specific structure using TypeScript

In the process of developing a React app with TypeScript, I encountered a challenging task involving formatting a complex nested JSON object into a specific structure. const data = { "aaa": { "aa": { "xxx&qu ...

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

Exploring VueJs 3: Strategies for loading and implementing actions on a component before mounting

Briefly: Can a virtual node be created outside of the DOM to preload images, seek videos... without ever being mounted in the real DOM? Detailed version: I want to ensure that the next slide appears only when it is fully initialized for a slideshow in Vu ...

Which comes first in AngularJS: ng-include or ng-repeat?

What is the outcome if I have a template containing ng-repeat and include it using ng-include? Will the included template have the completed ng-repeat, or will it be included without the ng-repeat being complete (and then completed after inclusion)? ...

Tips for avoiding html entities in a string

To prevent any user-entered content from being interpreted as HTML, I need to escape it so that special characters like < become < in the markup. However, I still want to wrap the escaped content with actual HTML tags. The goal is to ensure that the HTM ...

Determining the cursor location within a character in a div that is content editable using AngularJS

I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...

Javascript code to verify whether the page is currently positioned at the top

How can I use JavaScript to determine if the page is at scroll(0,0)? I have a full-page slider that needs to pause when the page is no longer at the top. The page may not be scrolled manually, as there are internal HTML # links that could load the page d ...

What is the best way to convert a locale code into a language name with i18next?

In the application I'm working on, there is a language selector feature that allows users to choose the display language for the app. Currently, we only have limited options available, but there are plans to expand the list in the future. My goal is t ...

Searching and updating a value in an array using JavaScript

I need help solving a Javascript issue I'm facing. I'm working on an e-commerce project built in Vue, and I want to implement the selection of product variants on the client-side. The data format being sent to the backend looks like this: { & ...

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

When navigating to a deep link or refreshing the page, NextJS fails to maintain global variables from the script

Within my Pages/_document.tsx file, there is a script that loads global public configuration as shown below. This script assigns global variables to the window object. Interestingly, when I initially load the home route of my application, everything work ...

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

Using Jquery to target all elements except for their child elements

I have the following code: <div id="mn"> <span></span> <span> <span></span></span> <span></span> <span> <span></span></span> <span></span> </div& ...