uni-app开发app时video全屏状态下cover-image不展示
uni-app开发app时video全屏状态下cover-image不展示
非全屏的情况下 可以展示 全屏的时候没有了
<video enable-play-gesture="false" id="myVideo" :show-fullscreen-btn="false" :show-play-btn="false"
:src="videoActive.VideoUrl" @play="plays" @pause="ting" @ended="ting" :poster="videoActive.PicPath"
autoplay="true" :controls="false" nitial-time="0" page-gesture="true" @timeupdate="timeUpdate"
@loadedmetadata="loadedMetadata" :duration="start">
<cover-image style="height: 60rpx;width: 60rpx; margin:300rpx 60rpx 0 auto;" class="imgsss"
src="/static/study/window.jpg" mode="" @click="changeShowWidth">
</cover-image>
</video>
14 回复
在uni-app开发中，确实会遇到在video组件全屏状态下cover-image不展示的问题。这通常是由于video组件在全屏时，其层级和显示机制与在非全屏状态下有所不同所导致的。为了解决这个问题，我们可以尝试通过调整CSS样式和布局逻辑，或者利用一些事件监听来控制cover-image的显示。
以下是一个示例代码，展示如何在video组件全屏和非全屏状态下正确显示cover-image。
首先，确保你的页面布局如下：
<template>
<view class="container">
<video
id="myVideo"
src="your-video-url.mp4"
controls
@fullscreenchange="handleFullscreenChange"
>
<cover-image src="your-cover-image-url.png" class="cover-image"></cover-image>
</video>
</view>
</template>
接下来，定义CSS样式，确保cover-image在非全屏状态下能够正常显示，并考虑全屏状态下的层级问题：
<style scoped>
.container {
position: relative;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: auto;
object-fit: cover;
}
.cover-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 确保cover-image在video之上 */
}
</style>
然后，在JavaScript中监听全屏变化事件，动态调整cover-image的显示状态（尽管在大多数情况下，上述CSS设置已经足够）：
<script>
export default {
methods: {
handleFullscreenChange(event) {
const video = this.$refs.myVideo;
const isFullscreen = video.webkitDisplayingFullscreen || video.mozFullScreen || video.fullscreenElement;
// 这里通常不需要做太多操作，因为CSS已经处理了显示逻辑
// 但如果需要基于全屏状态做特殊处理，可以在这里添加逻辑
console.log('Video is in fullscreen mode:', isFullscreen);
}
},
mounted() {
const video = document.getElementById('myVideo');
video.addEventListener('fullscreenchange', this.handleFullscreenChange);
video.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
video.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
const video = document.getElementById('myVideo');
video.removeEventListener('fullscreenchange', this.handleFullscreenChange);
video.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
video.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
}
}
</script>
注意：上述代码中，cover-image是uni-app的video组件内置的子组件，用于在视频加载或播放前显示封面图。通常，CSS样式设置正确后，cover-image应该能在全屏和非全屏状态下正常显示。如果仍然存在问题，请检查video组件的其他属性设置或父容器的样式是否影响了cover-image的显示。
