<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<video
id="myVideo"
ref="video"
class="video"
src="https://1500000059.vod2.myqcloud.com/6d050cf6vodtransbj1500000059/67d3e93c5285890805445689476/v.f100230.m3u8?t=5f463771&us=02522a2b2726fb0a03bb19f2d8d9524d&sign=0786718c40abecb7c0092da2b2d99ebb"
poster="https://1500000059.vod2.myqcloud.com/6d050cf6vodtransbj1500000059/67d3e93c5285890805445689476/coverBySnapshot/1595233739_1429505507.100_0.jpg"
poster-for-crawler="https://1500000059.vod2.myqcloud.com/6d050cf6vodtransbj1500000059/67d3e93c5285890805445689476/coverBySnapshot/1595233739_1429505507.100_0.jpg"
controls
@fullscreenchange="fullscreenchange"
>
<cover-view class="cover">
我是水印--------hah
</cover-view>
<!-- <cover-view class="cover" v-if="isShowMarkView">
我是水印--------hah
</cover-view> -->
</video>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
isShowMarkView: false
}
},
onLoad() {
},
methods: {
fullscreenchange(event){
if(event.detail.fullScreen){
this.isShowMarkView = true;
}else{
}
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.cover{
color: rgba(211,211,211,0.6);
font-size: 30rpx;
position: absolute;
top: 30%;
left: 0;
width: 250px;
height: 50px;
text-align:center;
line-height: 50px;
}
</style>
- 发布:2020-08-26 16:36
- 更新:2020-08-26 18:47
- 阅读:1212
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.5 (19F101)
HBuilderX类型: 正式
HBuilderX版本号: 2.8.8
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iPhone Xr
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
创建新项目,uni-app模板,将代码复制,即可复现成功。
将注释的cover-view打开,点击全屏,即可复现全屏视频错位bug。
创建新项目,uni-app模板,将代码复制,即可复现成功。
将注释的cover-view打开,点击全屏,即可复现全屏视频错位bug。
预期结果:
全屏下应该正常显示cover-view。
使用v-if控制cover-view显示与否是不应该导致video错位。
全屏下应该正常显示cover-view。
使用v-if控制cover-view显示与否是不应该导致video错位。
实际结果:
Viedeo 标签中使用 cover-view,小屏下显示正常,视频全屏后cover-view消失。
如果尝试在@fullscreenchange方法中,使用 v-if 控制cover-view的显示与否,还会导致全屏视频错位。
Viedeo 标签中使用 cover-view,小屏下显示正常,视频全屏后cover-view消失。
如果尝试在@fullscreenchange方法中,使用 v-if 控制cover-view的显示与否,还会导致全屏视频错位。
bug描述:
Viedeo 标签中使用 cover-view,小屏下显示正常,视频全屏后cover-view消失。
如果尝试在@fullscreenchange方法中,使用 v-if 控制cover-view的显示与否,还会导致全屏视频错位。
附件分别是小屏,全屏,以及使用v-if控制cover-view时的现象截图。