如何通过playsinline属性在iOS Safari中实现视频伪全屏功能

• 核心依赖Safari为video元素专属开放的私有API：webkitEnterFullscreen()（唤起原生全屏播放器）、webkitExitFullscreen()（退出原生全屏），不需要动态修改playsinline属性触发状态切换。
• 初始化阶段就给video元素固定添加playsinline+webkit-playsinline属性，默认保持内联播放状态，避免运行时动态修改属性导致的播放内核重加载问题。
• 通过监听webkitfullscreenchange事件同步当前播放状态，同步更新页面UI（比如全屏按钮的图标、控制栏显隐等）。

你原有方案的核心问题是频繁增删playsinline属性会触发视频内核重新解析播放参数，容易出现播放中断、状态错乱、加载卡顿等不稳定问题。
推荐直接调用Safari专属API实现切换，代码示例如下：

const video = document.getElementById('video');
// 初始化阶段固定添加内联播放属性，无需运行时修改
video.setAttribute('playsinline', '');
video.setAttribute('webkit-playsinline', ''); // 兼容iOS 10以下低版本

function toggleFullScreen() {
  // 检测当前是否处于原生全屏状态
  const isFullscreen = document.webkitIsFullScreen || video.webkitDisplayingFullscreen;
  
  if (isFullscreen) {
    // 退出原生全屏
    document.webkitExitFullscreen?.() || video.webkitExitFullscreen?.();
  } else {
    // 唤起原生全屏，注意该调用必须放在用户交互（点击/触摸）事件的回调中，否则会被Safari安全策略拦截
    video.webkitEnterFullscreen?.();
  }
}

// 可选：监听全屏状态变化自定义业务逻辑
video.addEventListener('webkitfullscreenchange', () => {
  const currentState = document.webkitIsFullScreen || video.webkitDisplayingFullscreen;
  // 此处可写入自定义UI更新逻辑，如全屏按钮切换、控制栏显隐控制等
});

补充兼容说明：iOS 16及以上版本的Safari已经支持W3C标准全屏API，可扩展兼容逻辑实现跨端统一调用：

// 唤起全屏兼容写法
const requestFullscreen = video.requestFullscreen || video.webkitRequestFullscreen || video.webkitEnterFullscreen;
requestFullscreen?.call(video);

内容的提问来源于stack exchange，提问作者Matt K