当前位置: 首页 > news >正文

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.效果:

http://www.lryc.cn/news/587566.html

相关文章:

  • 基于Spring Boot的生活用品电商网站的设计与实现
  • 国内隧道IP代理技术解析:原理、优势与实战应用
  • 算法学习笔记:21.动态规划——从原理到实战,涵盖 LeetCode 与考研 408 例题
  • linux 文件搜索与文件内容查看
  • Imx6ull用网线与电脑连接
  • 游戏玩法的专利博弈
  • 11、鸿蒙Harmony Next开发:列表布局 (List)
  • Spark 和 Hadoop MapReduce 的基本概念及区别
  • Spring Boot项目结构解析:构建高效、清晰的代码框架
  • UE5多人MOBA+GAS 22、创建技能图标UI,实现显示蓝耗,冷却,以及数字显示的倒数计时还有雷达显示的倒数计时
  • 【解决办法】越疆Dobot CR5 桌面客户端DobotStudio Pro连不上机器人
  • iOS高级开发工程师面试——Objective-C 语言特性
  • WPF的三轴机械手控件动画
  • MEMS IMU如何赋能无人机与机器人精准感知?
  • gitlab-ci.yml
  • 厘米级精准定位+低功耗通信,飞睿智能UWB技术赋能机器人高效作业
  • 触想CX-3588主板在安保巡检领域的落地实践:解锁机器人自主智能
  • LeetCode--45.跳跃游戏 II
  • MMKV 存储json list数据(kotlin)
  • 各种开发语言主要语法对比
  • 嵌入式硬件篇---单稳态多谐施密特电路
  • 第八章排序 选择题
  • Linux 基础操作:vim 编辑器、网络配置与远程登录全解析
  • 算法-线性枚举
  • 【算法】贪心算法:摆动序列C++
  • 解决Qt中“known incorrect sRGB profile“警告的Photoshop修改方法
  • 【记录】BLE|百度的旧蓝牙随身音箱手机能配对不能连接、电脑能连接不能使用的解决思路(Wireshark捕获并分析手机蓝牙报文)
  • 一文读懂循环神经网络(RNN)—语言模型+n元语法(1)
  • Knife4j快速入门
  • 基于微信小程序的财务管理系统的设计与实现;账本管理系统的设计与实现