uni-app 【报Bug】vue3.0 nvue页面video组件嵌套cover-image全屏后cover-image会变大

uni-app 【报Bug】vue3.0 nvue页面video组件嵌套cover-image全屏后cover-image会变大

操作步骤：

  • 点击全屏(竖屏)按钮video嵌套的cover-image不会发生变化
  • 点击全屏(横屏)按钮video嵌套的cover-image会变大

预期结果：

  • 点击全屏(横屏)按钮video嵌套的cover-image不会发生变化

实际结果：

  • 点击全屏(横屏)按钮video嵌套的cover-image明显变大了

bug描述：

  • vue3.0 nvue页面
  • 点击全屏(竖屏)按钮video嵌套的cover-image不会发生变化
  • 点击全屏(横屏)按钮video嵌套的cover-image会变大
<template>  
    <view>  
        这是news  

        <video  
            id="myVideo"  
            :src="url"  
            :show-center-play-btn="false"  
            :controls="false"  
            :enable-progress-gesture="false"  
            :show-fullscreen-btn="false"  
            :show-progress="false"  
            :show-loading="false"  
            codec="hardware"  
            :play-strategy="1"  
            :poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'"  
        >  
            <cover-image class="logo" @click="clickBtn(5)" src="../../static/logo.png"></cover-image>  
            <cover-view class="cover"></cover-view>  
        </video>  

        <view class="btns">  
            <button class="btn" @click="clickBtn(1)" type="primary">播放</button>  
            <button class="btn" @click="clickBtn(2)" type="primary">暂停</button>  
            <button class="btn" @click="clickBtn(3)" type="primary">全屏(竖屏)</button>  
            <button class="btn" @click="clickBtn(4)" type="primary">全屏(横屏)</button>  
            <button class="btn" @click="clickBtn(5)" type="primary">退出全屏</button>  
            <button class="btn" @click="clickBtn(6)" type="default">video</button>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            url: 'https://cdn.lunlunapp.com/video/2022/07/27/1b720f66-d7a4-29bc-6514-835c48b76697.mp4',  
            videoContext: ''  
        };  
    },  
    methods: {  
        clickBtn(i) {  
            let id = `myVideo`;  
            switch (i) {  
                case 1:  
                    try {  
                        this.videoContext = uni.createVideoContext(id, this);  
                        this.videoContext.play();  
                    } catch (err) {  
                        console.log(err);  
                    }  
                    break;  
                case 2:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.pause();  
                    break;  
                case 3:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.requestFullScreen({ direction: 0 });  
                    break;  
                case 4:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.requestFullScreen({ direction: -90 });  
                    break;  
                case 5:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.exitFullScreen();  
                    break;  
                case 6:  
                    uni.navigateTo({  
                        url: '../video/video'  
                    });  
                    break;  
            }  
        }  
    }  
};  
</script>  

<style scoped>  
.cover {  
    width: 80rpx;  
    height: 80rpx;  
    border-radius: 10rpx;  
    background: orangered;  
}  
.logo {  
    width: 40rpx;  
    height: 40rpx;  
    margin: 80rpx;  
}  
.btns {  
    width: 375px;  
    margin-top: 20rpx;  
}  
.btn {  
    width: 686rpx;  
    margin: 20rpx 32rpx;  
}  
</style>

附件:

图片:

Image 1 Image 2 Image 3


更多关于uni-app 【报Bug】vue3.0 nvue页面video组件嵌套cover-image全屏后cover-image会变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

====

更多关于uni-app 【报Bug】vue3.0 nvue页面video组件嵌套cover-image全屏后cover-image会变大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 vue3 nvue 页面横竖屏已支持自动 rpx 大小，如果需要固定大小应使用px

竖屏的话图标的大小不会发生变化，这是什么原因？

回复 3***@qq.com: 了解下 rpx/upx https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#尺寸单位

这是一个已知的uni-app nvue页面在Vue3.0下的bug，当video组件横屏全屏时，嵌套的cover-image会异常放大。

问题原因：

  1. 在横屏全屏模式下，nvue的布局计算出现异常
  2. cover-image组件没有正确处理横屏时的尺寸缩放

临时解决方案：

  1. 可以通过监听全屏状态变化，动态调整cover-image的样式
  2. 或者改用cover-view替代cover-image

建议：

  1. 可以到DCloud官方issues提交bug报告
  2. 关注uni-app版本更新，该问题可能会在后续版本修复

代码调整建议（临时方案）：

// 在data中添加
isFullScreen: false

// 修改全屏相关方法
case 3:
    this.isFullScreen = true;
    this.videoContext.requestFullScreen({ direction: 0 });
    break;
case 4:
    this.isFullScreen = true;
    this.videoContext.requestFullScreen({ direction: -90 });
    break;
case 5:
    this.isFullScreen = false;
    this.videoContext.exitFullScreen();
    break;

/* 修改样式 */
.logo {
    width: 40rpx;
    height: 40rpx;
    margin: 80rpx;
    transform: scale(var(--scale, 1));
}
回到顶部