uni-app开发app时vue页面video全屏时cover-image不展示，nvue页面正常，如何解决

在uni-app开发中，遇到Vue页面video组件全屏时cover-image不展示的问题，而NVue页面却表现正常，这通常是由于不同渲染引擎之间的差异导致的。uni-app的Vue页面使用的是Webview渲染，而NVue页面则使用的是Weex或原生渲染。针对这个问题，我们可以尝试以下几种方法来解决，这里主要通过代码示例来展示可能的解决方案。

方法一：使用CSS样式调整

首先，确保cover-image的样式正确设置，特别是在全屏模式下。可以尝试使用z-index和position属性来调整层级关系，确保cover-image在video之上。

<template>
  <view class="container">
    <video
      id="myVideo"
      src="video-url"
      controls
      @fullscreenchange="handleFullscreenChange"
    ></video>
    <image
      class="cover-image"
      src="cover-image-url"
      v-if="!isFullScreen"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: false
    };
  },
  methods: {
    handleFullscreenChange() {
      const video = document.getElementById('myVideo');
      this.isFullScreen = video.webkitDisplayingFullscreen || video.mozFullScreen || video.fullscreen;
    }
  }
};
</script>

<style>
.container {
  position: relative;
}
.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 确保cover-image在video之上 */
}
video {
  position: relative;
  z-index: 0;
}
</style>

方法二：动态添加和移除cover-image

通过监听video的全屏变化事件，动态地在全屏和非全屏状态下添加或移除cover-image。

<!-- 模板部分与上例相同，但脚本部分有所调整 -->
<script>
export default {
  data() {
    return {
      isFullScreen: false
    };
  },
  mounted() {
    const video = this.$refs.myVideo;
    video.addEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    const video = this.$refs.myVideo;
    video.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      this.isFullScreen = document.fullscreenElement !== null;
    }
  }
};
</script>

注意，这里使用了this.$refs.myVideo来获取video元素，因此在<video>标签上需要添加ref="myVideo"。

总结

由于uni-app在不同渲染引擎下的行为差异，解决全屏时cover-image不展示的问题可能需要针对特定平台或渲染引擎进行调整。上述方法提供了一种通过CSS样式和JavaScript事件监听来动态控制cover-image显示的方式，希望能帮助到你。如果问题依旧存在，建议查阅uni-app官方文档或社区论坛获取更多信息。