当前位置: 首页 > 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.dtcms.com/a/279238.html

相关文章:

  • 基于微信小程序停车场车位预约系统的设计与实现
  • 基于微信小程序的财务管理系统的设计与实现;账本管理系统的设计与实现
  • Browser MCP
  • 【PY32】如何使用 J-Link 和 MDK 开发调试 PY32 MCU
  • 第十九篇 自动化报表生成:Python一键生成可视化Excel图表与专业PDF报告,老板看了都点赞!
  • iOS 抓包工具评测:功能、限制与真实开发场景全解析
  • Spark SQL 之 UT
  • 人工智能在气候变化应对中的战略角色:从感知、模拟到决策支持
  • JAVA面试宝典 -《Spring Cloud Alibaba 实战:从限流到熔断》
  • AI多因子模型解析黄金3370美元:避险需求驱动与美欧墨关税升级的联动效应
  • 即刻开发:接入淘宝关键词搜索 API 采集海量商品数据
  • Linux 0.11 中,磁盘分区信息
  • win10安装Elasticsearch
  • 学习C++、QT---24(QT实现记事本项目的打开、保存、关闭)
  • 内测分发平台应用的异地容灾和负载均衡处理和实现思路
  • gitignore添加后如何生效?
  • docker简介
  • Xftp 7.0.0109p 安装教程 - 详细步骤图解
  • SpringBoot相较于Spring有什么优势
  • VR样板间:房产营销新变革
  • 每天一个前端小知识 Day 31 - 前端国际化(i18n)与本地化(l10n)实战方案
  • 【前端】【Iconify图标库】【vben3】createIconifyIcon 实现图标组件的自动封装
  • 缺乏实际里程碑管控项目进度,如何设定关键节点
  • 院级医疗AI管理流程—基于数据共享、算法开发与工具链治理的系统化框架
  • Sharding-Sphere学习专题(三)数据加密、读写分离
  • 机器人形态的几点讨论
  • 基于OpenCV的深度学习人脸识别系统开发全攻略(DNN+FaceNet核心技术选型)
  • SpringBoot3整合“Spring Security+JWT”快速实现demo示例与Apifox测试
  • 在 Azure Linux 上安装 RustFS
  • 【Echarts】 电影票房汇总实时数据横向柱状图比图