点击全屏(竖屏)按钮video嵌套的cover-image不会发生变化
点击全屏(横屏)按钮video嵌套的cover-image会变大
- 发布:2022-08-19 09:53
- 更新:2022-08-30 17:20
- 阅读:758
产品分类: 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>