0

Since there is no current implementation of the fullscreen Element according to MDN what is a proper workaround to check if a fullscreen video on mobile Safari iOS (iPhone, not iPad(!)) is exited and then fire an event (for example to hide the video element)?

Currently I listen for the changeFullScreen event and then trigger a function that checks if a fullscreenElement is present so I don't close the video when it opens (since this triggers the same event).

It seems I can check all other browsers except this one, and refuse to believe this is true.

My code so far (VueJS):

    document.addEventListener('fullscreenchange', this.onFullScreenChange)
    document.addEventListener('webkitfullscreenchange', this.onFullScreenChange)
    document.addEventListener('mozfullscreenchange', this.onFullScreenChange)
    document.addEventListener('msfullscreenchange', this.onFullScreenChange)

    onFullScreenChange() {
      if (
        !document.fullscreenElement &&
        !document.webkitFullscreenElement &&
        !document.mozFullScreenElement
      )
        this.closeVideo()
    },

Works perfectly on all tested browsers except mobile Safari where when the user closes the fullscreen the video just stops and stays open.

onewaveadrian
  • 390
  • 4
  • 14
  • Since according to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreen) `document.fullscreen ` is deprecated I am unsure if the suggested solution works/is recommended/futureproof @101arrowz – onewaveadrian Nov 24 '20 at 23:41
  • 1
    Deprecation is not the same as removed or unsupported. It should work without issue for supporting iOS Safari, since that browser appears to be out of date with the current web spec, while the modern ones will simply fire the `fullscreenchange` events. – 101arrowz Nov 24 '20 at 23:45

0 Answers0