3***@qq.com
3***@qq.com
  • 发布:2022-08-19 09:53
  • 更新:2022-08-30 17:20
  • 阅读:622

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10专业版

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: OPPO

手机机型: OPPO A9

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

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

预期结果:

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

实际结果:

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

bug描述:

vue3.0nvue页面
点击全屏(竖屏)按钮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: -90 });  
                    this.videoContext.requestFullScreen({ direction: 0 });  
                    break;  
                case 4:  
                    this.videoContext = uni.createVideoContext(id, this);  
                    this.videoContext.requestFullScreen({ direction: -90 });  
                    // this.videoContext.requestFullScreen({ direction: 0 });  
                    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>  
2022-08-19 09:53 负责人:无 分享
已邀请:
t***@qq.com
DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

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

  • 3***@qq.com (作者)

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

    2022-08-30 17:43

  • DCloud_uni-ad_HDX

    回复 3***@qq.com: 了解下 rpx/upx https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D

    2022-08-31 10:16

要回复问题请先登录注册