player fullscreenchange firing twice

[jmpri3]

In browsers that support the unprefixed fullscreen API (FF 64+ GC71+), the fullscreenchange event is firing twice every time fullscreen is toggled.

https://jsfiddle.net/jbrhq4s1/1/

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

This is a side-effect of using alert(). The alert brings the element out of fullscreen causing the second fullscreenchange event to trigger.
If you change the alert to a console.log, as in this example https://jsfiddle.net/jbrhq4s1/2/, you will only get one fullscreenchange event.

Hope that helps.

[jmpri3]

No it's not a side effect, it also happens with console.log.

[gkatsev]

I only see a single console.log event for each time the fullscreen toggle button is pressed.

[gkatsev]

Interesting, just tried it in Firefox, I can reproduce it there but can't reproduce it in my version of chrome.

[jmpri3]

Funny. Is that Chrome 71 or later, @gkatsev?

[gkatsev]

I was on chrome 70, I upgraded to 71 and can reproduce it in chrome as well now.

[gkatsev]

So, looks like this is due to a change in fullscreen behavior in browsers. We listen to the fullscreenchange event on the player

video.js/src/js/player.js

Line 527 in bc7d530

this.on('fullscreenchange', this.handleFullscreenChange_);

and previously, this would only be from our own triggering of fullscreenchange, starting with Chrome 71 (and a recent version of Firefox) which fully enabled spec version of the fullscreen API, we now received a fullscreenchange event from the element itself in addition to us triggering it manually.

I was able to test with this codepen https://codepen.io/gkatsev/pen/GPovor in older browsers and did not get a fullscreenchange event from the element itself.

The new browser behavior is likely the current spec based behavior and so we probably need to update Video.js to support both.

[jmpri3]

BTW, in case this helps others, I took advantage of the two events coming from different sources and having some different properties to workaround this by adding this code to the top of the event handler in our product:

    if (event.composed) {
      // Workaround events firing twice
      return;
    }

In unaffected browsers the rest of the event handler still runs and in the affected ones it runs once.

[gkatsev]

Looking at it more, this only worked previously by accident. Elements fired prefixed fullscreenchange events, so webkitfullscreenchange still fired. So, had we been listening to webkitfullscreenchange we would've been bit by this previously as well.
Chrome 71 unprefixed the fs API: https://bugs.chromium.org/p/chromium/issues/detail?id=383813