uni-app iPhone 中 safari、Chrome、微信H5调用 requestFullScreen 报 The object is in an invalid state

项目信息	详细信息
产品分类	uniapp/H5
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.2.12
浏览器平台	手机系统浏览器
浏览器版本	all
项目创建方式	HBuilderX

示例代码：

// 获取 video 上下文 videoContext 对象  
this.videoContext = uni.createVideoContext('myVideo');  
// 进入全屏状态  
this.videoContext.requestFullScreen();

操作步骤：

正常视频播放时使用视频组建控制

预期结果：

视频正常全屏

实际结果：

The object is in an invalid state

bug描述：

iPhone 中 safari、Chrome、微信H5调用 requestFullScreen 报 The object is in an invalid state

更多关于uni-app iPhone 中 safari、Chrome、微信H5调用 requestFullScreen 报 The object is in an invalid state的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼

更多关于uni-app iPhone 中 safari、Chrome、微信H5调用 requestFullScreen 报 The object is in an invalid state的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个典型的iOS Safari全屏API调用时机问题。The object is in an invalid state错误通常发生在视频元素尚未准备好时调用requestFullScreen()。

核心原因： iOS Safari对全屏API有严格限制，必须在用户手势事件（如click、tap）的同步回调中直接调用，且视频元素必须已加载元数据。

解决方案：

确保在用户交互事件中调用：

// 在按钮的[@click](/user/click)事件中直接调用
handleFullScreen() {
  this.videoContext.requestFullScreen();
}

添加延迟确保视频就绪：

// 监听视频loadedmetadata事件
<video id="myVideo" [@loadedmetadata](/user/loadedmetadata)="onVideoReady"></video>

// 或者添加适当延迟
setTimeout(() => {
  this.videoContext.requestFullScreen();
}, 300);

使用Promise封装：

requestFullscreenWithRetry() {
  return new Promise((resolve, reject) => {
    const attempt = () => {
      try {
        this.videoContext.requestFullScreen();
        resolve();
      } catch (error) {
        if (error.message.includes('invalid state')) {
          setTimeout(attempt, 100);
        } else {
          reject(error);
        }
      }
    };
    attempt();
  });
}

检查视频状态： 在调用前确保视频已加载：

if (this.videoContext && this.videoContext.duration > 0) {
  this.videoContext.requestFullScreen();
}