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

【报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_uniAD_HDX

DCloud_uniAD_HDX

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

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

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


    2022-08-30 17:43

  • DCloud_uniAD_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

要回复问题请先登录注册