uni-app 视频播放器插件讨论 liusheng22的html5视频播放器-解决层级覆盖问题 - 全屏监听事件无反应，如何实现点击全屏横屏播放并退出竖屏展示

针对你提到的 uni-app 视频播放器插件中的层级覆盖问题和全屏监听事件无反应的问题，这里提供一个实现点击全屏横屏播放并退出竖屏展示的示例代码。我们将使用 uni-app 自带的视频组件和一些 JavaScript API 来实现这个功能。

首先，确保你的 manifest.json 中已经配置了相关的权限，允许应用进入全屏和横屏模式。

{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "screenOrientation": "landscape" // 横屏模式
    }
  }
}

接下来，在你的页面中使用 uni-app 的 <video> 组件，并添加相关的事件监听和逻辑处理。

<template>
  <view class="container">
    <button @click="enterFullScreen">进入全屏</button>
    <video
      id="videoPlayer"
      src="your-video-url.mp4"
      controls
      autoplay
      @fullscreenchange="onFullScreenChange"
      style="width: 100%; height: auto;"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    enterFullScreen() {
      const video = document.getElementById('videoPlayer');
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen) { // Firefox
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullscreen) { // Chrome, Safari, Opera
        video.webkitRequestFullscreen();
      } else if (video.msRequestFullscreen) { // IE/Edge
        video.msRequestFullscreen();
      }
    },
    onFullScreenChange() {
      const video = document.getElementById('videoPlayer');
      if (document.fullscreenElement === video) {
        console.log('全屏模式');
      } else {
        console.log('退出全屏模式');
        // 可以在这里添加退出全屏后的处理逻辑，比如调整页面布局等
      }
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000; /* 确保视频组件不会被其他元素覆盖 */
}
</style>

在这个示例中，我们定义了一个按钮来触发全屏模式，并通过监听 fullscreenchange 事件来处理全屏状态的变化。此外，我们使用了不同浏览器的全屏 API 来确保兼容性。

注意，由于 uni-app 跨平台的特点，上述代码可能需要在不同平台上进行适配。特别是在小程序环境中，全屏 API 的支持情况可能有所不同，需要根据具体平台进行调整。

以上代码提供了一个基本的实现思路，你可以根据实际需求进行进一步的优化和扩展。