我想创建一个视频元素，播放时自动全屏。根据我目前的理解，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上定义的(这是出乎意料的)。最后，为android FireFox定义了requestFullscreen，但没有定义webkitEnterFullScreen。
所以我的问题是为什么这两个方法定义为android Chrome，哪个方法应该在给定的浏览器上使用?
我正在做类似的事情，从本质上讲，通过检查和调用您可以找到的任何函数是最安全的，尽管每次转换一次。我相信全屏API现在应该完成了，但根据浏览器目标，你可能想要/需要调用供应商前缀的变体，如ms/moz/webkit来启动和离开全屏模式。
https://github.com/sindresorhus/screenfull.js/曾经是这些东西的可靠参考，但是最近苹果改变了与其他平台相比的全屏功能(特别是你需要瞄准视频元素，而你可以在桌面Safari和其他平台上全屏其他元素)，似乎大多数iOS/Safari文档都过时了。
最后，如果你想只支持全屏视频，这应该是iOS Safari的默认设置，你需要用playsinline属性来禁用它。