问题描述
我想创建一个在播放时自动全屏显示的视频元素。根据我目前的理解,似乎 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
属性将其禁用。