uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
uniapp官方的说法是因为页面使用rpx,但是全屏和退出全屏自动计算屏幕尺寸不支持rpx,建议使用px。
但是因为uniapp端的开发都是使用rpx作为屏幕尺寸计算参数,不可能因为video全屏播放功能就整个全部修改,工作量大,耗时耗力。
所以就有了下面的解决方法。
我的方式是:通过创建空白页面过渡。
1.新建blank.vue页面:
<template><!-- 此空白页面用于处理视频全屏退出后页面样式混乱 --><view></view>
</template><script>export default {data() {return {}},methods: {},onLoad() {// #ifdef APP-PLUSplus.screen.unlockOrientation(); //解除屏幕方向的锁定,但是不一定是竖屏;plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏// #endifsetTimeout(() => {uni.navigateBack({delta: 1})}, 30)},}
</script><style></style>
2.video标签监听全屏事件:
<video id="videoId" ref="playVideo" :src="encodeURI(getVideo(resourceId))" controls autoplay@timeupdate="updateTime" @play="playToVideo" @fullscreenchange="screenChange"></video>
3. method方法中监听退出全屏事件,如果退出,跳转上述空白页面。
methods: {screenChange(e) {//视频全屏退出后页面样式混乱,跳转空白页处理后再返回本页// #ifdef APP-PLUSif (!e.target.fullScreen) {uni.navigateTo({url: '/subpages/multimedia/blank',animationType: 'none',animationDuration: 0})}// #endif}}
4.在空白页面中切换为竖屏后再返回video所在页面。这时候rpx参数重新计算,不会污染页面样式。
5.效果: