uni-app中video标签视频在手机浏览器中被劫持导致原页面显示不了

在uni-app中，使用<video>标签嵌入视频时，确实可能会遇到视频在手机浏览器中被劫持（即视频全屏播放后无法返回到原页面）的问题。这通常是由于浏览器对视频全屏播放的处理机制导致的。为了尽量避免这种情况，可以采取一些技术手段来处理，例如使用自定义控件来控制视频播放，或者在视频全屏播放后通过一些事件监听机制尝试返回原页面。

以下是一个基于uni-app的示例代码，通过监听视频的全屏变化事件，尝试在视频退出全屏时恢复页面显示：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="your-video-url.mp4"
      controls
      @fullscreenchange="handleFullscreenChange"
      @webkitfullscreenchange="handleFullscreenChange"
      @mozfullscreenchange="handleFullscreenChange"
      @MSFullscreenChange="handleFullscreenChange"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    handleFullscreenChange() {
      // 检查当前是否处于全屏状态
      if (!document.fullscreenElement && 
          !document.webkitFullscreenElement && 
          !document.mozFullScreenElement && 
          !document.msFullscreenElement) {
        // 如果不在全屏状态，可以尝试刷新页面或恢复某些UI元素
        console.log('Video exited fullscreen, restoring page...');
        // 这里可以添加你的恢复页面显示的逻辑，例如重新渲染某些组件
        // this.restorePage();
      }
    },
    // restorePage() {
    //   // 恢复页面显示的逻辑，比如重置样式、重新渲染组件等
    // }
  },
  mounted() {
    // 可以在这里添加一些初始化逻辑，比如获取视频元素等
    const videoElement = document.getElementById('myVideo');
    // 监听视频的其他事件，比如播放、暂停等，根据需要添加
    // videoElement.addEventListener('play', this.handlePlay);
    // videoElement.addEventListener('pause', this.handlePause);
  },
  beforeDestroy() {
    // 清理事件监听器，避免内存泄漏
    const videoElement = document.getElementById('myVideo');
    videoElement.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    videoElement.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    videoElement.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
    videoElement.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
    // 清理其他事件监听器
    // videoElement.removeEventListener('play', this.handlePlay);
    // videoElement.removeEventListener('pause', this.handlePause);
  }
};
</script>

<style>
.container {
  /* 页面样式 */
}
</style>

请注意，上述代码只是一个基本的示例，具体实现可能需要根据实际情况进行调整。此外，由于不同浏览器对全屏API的支持和行为可能有所不同，因此在实际应用中可能需要针对特定的浏览器进行适配和优化。