uni-app IOS上canvas会遮挡全屏的视频，安卓上正常显示

在 uni-app 中，canvas 组件在 iOS 上可能会遮挡全屏视频，而在 Android 上正常显示。这个问题通常与 iOS 的渲染机制和 canvas 的层级管理有关。以下是一些可能的解决方案：

1. 调整 canvas 的 z-index

尝试调整 canvas 的 z-index 属性，确保它不会遮挡视频。你可以通过设置 canvas 的 style 属性来调整 z-index。

<canvas style="z-index: 1;"></canvas>
<video style="z-index: 2;"></video>

2. 使用 cover-view 和 cover-image

uni-app 提供了 cover-view 和 cover-image 组件，它们可以在原生组件（如 video）上绘制内容，而不会被遮挡。你可以尝试将 canvas 替换为 cover-view 或 cover-image。

<video src="your-video-url" controls></video>
<cover-view style="position: absolute; top: 0; left: 0; z-index: 1;">
  <!-- 你的内容 -->
</cover-view>

3. 使用 web-view 嵌入视频

如果上述方法无效，你可以尝试将视频嵌入到 web-view 中，这样可以避免 canvas 的遮挡问题。

<web-view src="your-video-url"></web-view>

4. 动态控制 canvas 的显示

在视频全屏时，动态隐藏 canvas，退出全屏时再显示 canvas。你可以通过监听视频的全屏事件来实现这一点。

// 监听视频全屏事件
video.addEventListener('fullscreenchange', () => {
  if (video.isFullscreen) {
    canvas.style.display = 'none';
  } else {
    canvas.style.display = 'block';
  }
});

5. 使用 uni.createVideoContext

通过 uni.createVideoContext 控制视频的播放和全屏状态，结合 canvas 的显示和隐藏。

const videoContext = uni.createVideoContext('myVideo');
videoContext.requestFullScreen(); // 进入全屏
videoContext.exitFullScreen(); // 退出全屏

6. 使用 uni-app 的 nvue 页面

nvue 是 uni-app 的一种原生渲染模式，可能在某些情况下解决层级问题。你可以尝试将页面转换为 nvue 页面。

7. 检查 canvas 的 position 属性

确保 canvas 的 position 属性不会导致它覆盖视频。你可以尝试将 canvas 的 position 设置为 absolute 或 relative，并调整其位置。

<canvas style="position: absolute; top: 0; left: 0;"></canvas>

8. 使用 uni-app 的 plus API

如果你需要更底层的控制，可以使用 uni-app 的 plus API 来管理视频和 canvas 的层级。

plus.navigator.setFullscreen(true); // 进入全屏
plus.navigator.setFullscreen(false); // 退出全屏