iOS WebView中webkitRequestFullscreen无效，如何实现视频全屏？

iOS 端的 WKWebView（当前主流 WebView 组件）对网页端的全屏 API 有特殊限制，直接调用元素的 requestFullscreen 系列方法会出现方法未定义的情况，这是因为苹果默认将视频全屏的控制权交由原生播放器组件处理。以下是两种可行的解决思路：

方案1：调用 iOS 视频元素专属全屏方法（需配合原生配置） #

如果你的 WebView 是自研原生壳子，先在 iOS 原生代码中配置 WKWebView 允许媒体内联播放与全屏：

let webConfiguration = WKWebViewConfiguration()
// 允许视频内联播放
webConfiguration.allowsInlineMediaPlayback = true
// 取消播放需用户手动触发的限制（适配自动播放）
webConfiguration.mediaTypesRequiringUserActionForPlayback = []
// 允许视频全屏/画中画
webConfiguration.allowsPictureInPictureMediaPlayback = true

let webView = WKWebView(frame: .zero, configuration: webConfiguration)

完成原生配置后，前端代码中调用 iOS 视频元素特有的 webkitEnterFullscreen 方法：

const onClickVideoHandler = useCallback(() => {
  const video = videoRef.current;
  if (!video) return;

  // iOS WebView 专属全屏触发方法
  if (video.webkitEnterFullscreen) {
    video.webkitEnterFullscreen();
  } 
  // 兼容其他环境
  else if (video.requestFullscreen) {
    video.requestFullscreen();
  }
}, [videoRef.current]);

方案2：模拟原生控件点击（无需原生修改） #

如果无法修改原生 WebView 配置，可以临时开启视频原生控件，模拟点击全屏按钮：

const onClickVideoHandler = useCallback(() => {
  const video = videoRef.current;
  if (!video) return;

  // 临时开启原生控件
  video.controls = true;
  // 延迟获取控件（等待DOM渲染）
  setTimeout(() => {
    // 适配不同版本的控件选择器
    const fullscreenBtn = video.querySelector('button[aria-label="全屏"]') || 
                          video.querySelector('.webkit-media-controls-fullscreen-button');
    fullscreenBtn?.click();
    // 重新隐藏原生控件
    video.controls = false;
  }, 100);
}, [videoRef.current]);

关键注意事项 #

• 必须由用户主动交互触发：iOS 安全策略要求全屏操作必须通过用户点击等主动行为触发，你的点击事件符合要求，不能通过定时器等自动触发。
• 保留 playsInline 属性：该属性确保视频默认内联播放，避免自动进入原生全屏，才能让自定义触发逻辑生效。

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