iOS平台requestFullscreen API无法工作，如何程序化实现视频全屏？

这个问题我做移动端视频开发时也踩过坑，iOS Safari（包括iOS上其他基于WebKit内核的浏览器）对全屏API的支持确实有自己的一套规则，咱们一步步来解决：

1. 替换为iOS兼容的全屏方法 #

iOS WebKit内核并没有实现标准的requestFullscreen()，而是提供了专属的webkitEnterFullscreen()方法，所以咱们需要做兼容性判断，同时兼容标准API和iOS的私有API：

// index.js
const video = document.querySelector(".video");

function fullScreen() {
  // 优先使用标准全屏API
  if (video.requestFullscreen) {
    video.requestFullscreen().catch(err => console.log(err));
  } 
  // 适配iOS WebKit
  else if (video.webkitEnterFullscreen) {
    video.webkitEnterFullscreen();
  } 
  // 兜底提示
  else {
    console.log("当前浏览器不支持全屏功能");
  }
}

2. 必须通过用户交互触发全屏 #

这是iOS的核心限制！苹果为了防止恶意网站自动全屏打扰用户，禁止任何非用户主动触发的全屏操作。比如你不能在window.onload里直接调用fullScreen()，必须把这个方法绑定到用户的点击、触摸等交互事件上，比如：

<!-- 用按钮触发全屏 -->
<button onclick="fullScreen()">点击进入全屏</button>
<video class="video" src="your-video-source.mp4" controls></video>

额外注意事项 #

• 如果你的视频设置了playsinline或webkit-playsinline属性，这是允许视频在页面内播放的配置，不会影响全屏功能，但依然需要用户主动触发；
• 对于iOS 14.2及以上版本，部分浏览器已经支持标准的requestFullscreen()，但为了兼容旧版本，保留webkit前缀的判断还是很有必要的；
• 如果你是在WKWebView封装的App中开发，还需要在原生代码里配置allowsInlineMediaPlayback权限，不过纯网页场景不需要这一步。

备注：内容来源于stack exchange，提问作者DBencz