Flutter WebView视频页面加载自动全屏实现问题求助

核心问题原因 #

document.requestFullscreen()无法生效主要是两个原因：

1. 浏览器安全策略：全屏请求必须由用户交互触发（比如点击、触摸），页面加载完成后直接调用会被浏览器拦截。
2. 目标元素错误：直接对整个document请求全屏，成功率远低于定位到具体的video元素，部分页面的全屏逻辑仅绑定在视频元素上。

解决方案步骤 #

1. 配置WebView允许自动播放视频 #

在initialOptions中关闭媒体播放需要用户手势的限制，让视频可以自动加载播放，为后续全屏请求铺路：

InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
    mediaPlaybackRequiresUserGesture: false,
    // 保留你原有的其他配置项
  ),
);

2. 延迟定位视频元素并请求全屏 #

页面onLoadStop仅代表DOM加载完成，但视频元素可能还未初始化完成，所以添加延迟执行逻辑，同时定位到具体video元素发起全屏请求：

onLoadStop: (controller, url) {
  setState(() {
    isLoading = false;
  });
  // 延迟2秒执行，确保视频元素已完成初始化（可根据实际页面调整时长）
  Future.delayed(const Duration(seconds: 2), () async {
    await controller.evaluateJavascript(source: """
      // 兼容不同浏览器的全屏API
      function requestFullScreen(el) {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.webkitRequestFullscreen) {
          el.webkitRequestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      }
      
      // 找到页面中的第一个视频元素
      const video = document.querySelector('video');
      if (video) {
        // 先触发视频播放，部分视频需处于播放状态才能触发全屏
        video.play().then(() => {
          // 检查当前是否未处于全屏状态
          if (!document.fullscreenElement && !document.webkitFullscreenElement) {
            requestFullScreen(video);
          }
        }).catch(err => console.error('播放或全屏失败:', err));
      }
    """);
  });
},

3. 备选方案：模拟用户交互触发全屏 #

如果上述方法仍被浏览器拦截，可以尝试先模拟一个用户点击事件在视频元素上，再发起全屏请求（部分浏览器会将模拟点击视为有效交互）：
在evaluateJavascript的脚本中替换为以下内容：

// 兼容不同浏览器的全屏API
function requestFullScreen(el) {
  if (el.requestFullscreen) {
    el.requestFullscreen();
  } else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if (el.msRequestFullscreen) {
    el.msRequestFullscreen();
  }
}

const video = document.querySelector('video');
if (video) {
  // 模拟用户点击视频元素
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  video.dispatchEvent(clickEvent);
  
  // 触发播放并请求全屏
  video.play().then(() => {
    if (!document.fullscreenElement && !document.webkitFullscreenElement) {
      requestFullScreen(video);
    }
  }).catch(err => console.error('操作失败:', err));
}

注意事项 #

• 延迟时间可根据实际页面加载速度调整，避免延迟过短导致视频元素未找到。
• 部分视频网站会有反自动化逻辑，可能会阻止脚本触发的全屏请求，这种情况下需要进一步分析页面的视频加载逻辑。

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