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>我的结果有点令人困惑。没有为iOS Safari/Chrome定义requestFullscreen，而定义了webkitEnterFullScreen (这是预期的)。然而，requestFullscreen和webkitEnterFullScreen都是在Chrome android上定义的(这是意想不到的)。最后，定义了requestFullscreen，但没有为android FireFox定义webkitEnterFullScreen。
所以我的问题是，为什么这两种方法都是为android Chrome定义的，在给定的浏览器上应该使用哪种方法？
回答 1
Stack Overflow用户
发布于 2021-01-27 03:39:36
我正在做类似的事情，基本上你可以通过检查和调用你能找到的任何函数来最安全，尽管每个转换一次。我相信Fullscreen API现在应该已经完成了，但根据浏览器的目标，你可能想/需要调用供应商前缀的变体，比如ms/moz/webkit，用于启动和离开全屏模式。
https://github.com/sindresorhus/screenfull.js/曾经是这些东西的可靠参考，但是最近苹果已经改变了与其他平台相比的全屏功能(特别是你需要定位视频元素，而你可以在桌面Safari和其他平台上全屏显示其他元素)，似乎大多数iOS/Safari文档已经过时了。
最后，如果您只想支持全屏视频，这应该是iOS Safari的默认设置，而您需要使用playsinline属性禁用它。
https://stackoverflow.com/questions/65852861
复制相似问题
腾讯云开发者
