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?
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.