存在感_wkj
存在感_wkj
  • 发布:2020-08-26 16:36
  • 更新:2020-08-26 18:47
  • 阅读:1212

【报Bug】Viedeo 标签中使用 cover-view,小屏下显示正常,视频全屏后cover-view消失

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.5 (19F101)

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iPhone Xr

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>  

操作步骤:

创建新项目,uni-app模板,将代码复制,即可复现成功。

将注释的cover-view打开,点击全屏,即可复现全屏视频错位bug。

预期结果:

全屏下应该正常显示cover-view。

使用v-if控制cover-view显示与否是不应该导致video错位。

实际结果:

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时的现象截图。

2020-08-26 16:36 负责人:无 分享
已邀请:
jxtian

jxtian

文档:

在 video 组件中使用时,若想在全屏模式下使用cover-view,只有在微信小程序、App端的nvue页面可实现

该问题目前已经被锁定, 无法添加新回复