iPhone端iOS Safari基于HTML/JS实现视频全屏的技术咨询

为什么YouTube在Safari中能实现全屏？ #

YouTube依赖的是Safari对<video>元素的专属原生全屏支持，这和标准Fullscreen API（包括webkitfullscreen系列）不是同一机制。Safari为视频元素提供了系统级的全屏能力，可通过视频自带控件或特定API触发，不受通用Fullscreen API的限制。

你的调用失效原因 #

iPhone Safari完全禁用了通用Fullscreen API，仅<video>元素能通过专属方式触发全屏，普通DOM元素无法调用webkitfullscreen相关方法实现全屏。

替代方案与实现技巧 #

1. 视频元素全屏实现 #

如果需求是视频全屏，直接利用Safari的原生视频全屏支持：

• 给视频元素添加webkit-playsinline属性（iOS 10+强制要求），再通过以下代码触发：

const videoEl = document.querySelector('video');
// 兼容各浏览器的视频全屏触发
if (videoEl.webkitEnterFullscreen) {
  videoEl.webkitEnterFullscreen();
} else if (videoEl.requestFullscreen) {
  videoEl.requestFullscreen();
}

⚠️ 注意：该操作必须由用户交互触发（如点击按钮），Safari禁止自动触发全屏。

2. 普通元素全屏（仅iPad Safari） #

iPad Safari支持普通元素通过Fullscreen API实现全屏，iPhone完全不支持，兼容代码如下：

function triggerFullscreen(el) {
  if (el.requestFullscreen) {
    el.requestFullscreen();
  } else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if (el.msRequestFullscreen) {
    el.msRequestFullscreen();
  }
}
// 绑定用户点击事件触发
document.querySelector('.fullscreen-trigger').addEventListener('click', () => {
  triggerFullscreen(document.body);
});

3. 视觉模拟全屏（iPhone兼容） #

如果是iPhone上的普通元素需要类似全屏的视觉效果，可通过CSS模拟：

.fullscreen-mock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #ffffff;
}

这种方式只是视觉上占满屏幕，并非系统级全屏，顶部状态栏和底部导航栏仍会显示，但可满足部分场景需求。

内容的提问来源于stack exchange，提问作者Teun Dozeman