video全屏操作后无法被cover-view覆盖
w***@qq.com
- 发布：2023-08-13 11:11
- 更新：2023-08-14 10:12
- 阅读：1542
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： Android
手机系统版本号： Android 9.0
手机厂商： 模拟器
手机机型： 夜神模拟器，电视盒子
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
按正常应该video全屏后，cover-veiw会覆盖在video上面
按正常应该video全屏后，cover-veiw会覆盖在video上面
实际结果：
video全屏播放后，cover-veiw没有被覆盖，而是被video全屏遮挡
video全屏播放后，cover-veiw没有被覆盖，而是被video全屏遮挡
bug描述：
cover-view无法在video全屏后覆盖
示例：
<video id="player" controls="false" :class="clazz" :src="src" :autoplay="autoplay" :enable-play-gesture="false"
:enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="true" @play="status=1" @pause="status=0"
@timeupdate="timeupdate" @fullscreenchange="fullscreenchange">
<cover-image class="controls-play img" v-if="status==0" src="/static/play.png"></cover-image>
<cover-view v-if="fullScreen" style="position: absolute;margin: 20px;display: flex;color: #ffffff;">123</cover-view>
</video>
爱豆豆 - 办法总比困难多
cover-view Tips：在 video 组件中使用时，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue页面可实现。
你可以这样使用 另外cover-view层级本身就高于video 不要使用 position 属性
<cover-view style="background-color: #fff;height: 100rpx;">覆盖内容</cover-view>
w***@qq.com (作者)
在nvue页面cover-view只能用于<video>吗，如果nvue用别的原生播放器cover-view可以覆盖吗
2023-08-14 11:42
爱豆豆
回复 w@qq.com: 回复 w@qq.com: 别的播放器 不也要通过video实现吗？你试试不就知道了
2023-08-14 15:30
1***@qq.com
autoplay="true" :controls="false" nitial-time="0" page-gesture="true" @timeupdate="timeUpdate"
@loadedmetadata="loadedMetadata" :duration="start">
<cover-image class="imgsss" src="/static/study/window.jpg" mode="" @click="changeShowWidth">
</cover-image>
</video>
2024-06-18 11:35