webkitEnterFullScreen vs requestFullscreen browser availability

user_9174232 0
Viewed 1408

I would like to create a video element that auto-fullscreens when played. From my current understanding, it seems like requestFullscreen is available for non-iOS devices while webkitEnterFullScreen is available for iOS devices. I decided to check out the availability of the said methods on different mobile browsers using this page that checks if requestFullscreen and webkitEnterFullScreen are defined for a video element:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <p>webkitEnterFullScreen</p>
  <div id="webkit" style="width:50px;height:50px;border:1px solid black;background:red;"></div>
  <p>requestFullscreen</p>
  <div id="request" style="width:50px;height:50px;border:1px solid black;background:red;"></div> 

  <video id="video"></video>

  <script>
    let video = document.getElementById("video");
    if(video.webkitEnterFullScreen) {
      let cb = document.getElementById("webkit");
      cb.style.background = "green";
    }
    if(video.requestFullscreen) {
      let cb = document.getElementById("request");
      cb.style.background = "green";
    }
  </script>

</body>

</html>

My results were a bit confusing. requestFullscreen was not defined for iOS Safari/Chrome while webkitEnterFullScreen was (this was expected). However, both requestFullscreen and webkitEnterFullScreen were defined on Chrome android (this was unexpected). Lastly, requestFullscreen was defined but not webkitEnterFullScreen for android FireFox.

So my question is why were both methods defined for android Chrome, and which method should one use on a given browser?

html5-fullscreen fullscreen html javascript
1 Answers

I'm working on similar things, and essentially you would be safest by checking for and calling any function you can find, though once per transition. I believe the Fullscreen API should be done by now, but depending on browser targets you might want/need to call vendor-prefixed variations such as ms/moz/webkit for both starting and leaving full screen modes.

https://github.com/sindresorhus/screenfull.js/ used to be a solid reference for these things, however as of recently Apple has changed fullscreen functionality compared to the other platforms (notably you need to target a video element, whereas you can fullscreen other elements on desktop Safari and other platforms) and it seems most iOS/Safari documentation is outdated.

Finally, if you want to support only fullscreen video, this should be the default on iOS Safari, where you'd in turn need to disable it with the playsinline attribute instead.

user_34978670
Related