webkitEnterFullScreen 与 requestFullscreen 浏览器可用性

如何解决webkitEnterFullScreen 与 requestFullscreen 浏览器可用性

我想创建一个在播放时自动全屏显示的视频元素。根据我目前的理解，似乎 requestFullscreen 可用于非 iOS 设备，而 webkitEnterFullScreen 可用于 iOS 设备。我决定使用此页面检查上述方法在不同移动浏览器上的可用性，该页面检查是否为视频元素定义了 requestFullscreen 和 webkitEnterFullScreen：

<!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>

我的结果有点令人困惑。 requestFullscreen 没有为 iOS Safari/Chrome 定义，而 webkitEnterFullScreen 是（这是预期的）。但是，requestFullscreen 和 webkitEnterFullScreen 都是在 Chrome android 上定义的（这是出乎意料的）。最后，requestFullscreen 已定义，但 webkitEnterFullScreen 未定义为 android FireFox。

所以我的问题是，为什么为 android Chrome 定义了这两种方法，以及应该在给定的浏览器上使用哪种方法？

解决方法

我正在做类似的事情，基本上你通过检查和调用你能找到的任何函数是最安全的，尽管每次转换一次。我相信 Fullscreen API 现在应该完成，但根据浏览器目标，您可能想要/需要调用供应商前缀的变体，例如 ms/moz/webkit 以启动和离开全屏模式。

https://github.com/sindresorhus/screenfull.js/ 曾经是这些东西的可靠参考，但是最近与其他平台相比，Apple 更改了全屏功能（特别是您需要定位一个视频元素，而您可以全屏显示桌面上的其他元素Safari 和其他平台），而且大多数 iOS/Safari 文档似乎已经过时。

最后，如果您只想支持全屏视频，这应该是 iOS Safari 上的默认设置，而您又需要使用 playsinline 属性将其禁用。