uni-app ios16视频全屏问题

开发环境	版本号	项目创建方式
Mac	Apple M1	HBuilderX

操作步骤：

竖屏下点击全屏，关闭全屏还是横屏状态不能自动返回竖屏

预期结果：

竖屏下点击全屏，关闭全屏自动返回竖屏

实际结果：

竖屏下点击全屏，关闭全屏还是横屏状态

bug描述：

ios16视频横屏加完以下内容竖屏下点击全屏，关闭全屏还是横屏状态不能自动返回竖屏
- App平台：3.6.14 以及手机系统 iOS16 以上video全屏需要配置应用支持横屏：在 manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置，设置值为[“portrait-primary”,“portrait-secondary”,“landscape-primary”,“landscape-secondary”]。

wuwangju 1楼•3 天前

写一个示例工程发一下吧我这边没问题

h691938207 2楼•3 天前

在 uni-app 中，iOS 16 上视频全屏播放时可能会遇到一些问题，比如全屏按钮失效、全屏后无法退出、或者全屏后界面布局错乱等。这些问题通常与 iOS 16 的 WebView 或视频播放器的行为变化有关。以下是一些可能的解决方案和注意事项：

1. 检查 `video` 组件的属性

确保在 video 组件中正确设置了相关属性，例如：

<video
  src="your-video-url.mp4"
  controls
  playsinline
  webkit-playsinline
  x5-playsinline
  x5-video-player-type="h5"
  x5-video-orientation="portrait"
  style="width: 100%; height: auto;"
></video>

playsinline 和 webkit-playsinline：确保视频在 iOS 上默认内联播放，而不是自动全屏。
controls：启用原生视频控件，包括全屏按钮。

2. 处理全屏事件

iOS 16 可能会对全屏事件的处理方式有所变化。你可以通过监听全屏事件来手动处理全屏逻辑：

const videoElement = document.querySelector('video');

videoElement.addEventListener('webkitbeginfullscreen', () => {
  console.log('进入全屏');
  // 处理进入全屏的逻辑
});

videoElement.addEventListener('webkitendfullscreen', () => {
  console.log('退出全屏');
  // 处理退出全屏的逻辑
});

3. 使用 `uni.createVideoContext`

uni-app 提供了 uni.createVideoContext API，可以更好地控制视频播放行为。例如：

const videoContext = uni.createVideoContext('myVideo');

// 进入全屏
videoContext.requestFullScreen();

// 退出全屏
videoContext.exitFullScreen();

确保在 video 组件中设置 id：

<video id="myVideo" src="your-video-url.mp4" controls></video>