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.pswp.cn/bicheng/88963.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/88963.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/88963.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重复频率较高的广告为何一直在被使用?

在日常生活中&#xff0c;重复评率较高的洗脑广告我们时常能够碰到。广告的本质是信息传递&#xff0c;而重复频率较高的广告往往可以通过洗脑式的传播方式来提升传播效率。下面就让我们一同来了解下&#xff0c;为何这类广告一直受到企业的青睐。一、语义凝练高频率广告的内容…

内容管理系统指南:企业内容运营的核心引擎

内容管理看似简单&#xff0c;实际上随着内容量的激增&#xff0c;管理难度也逐步提升。尤其是在面对大量页面、图文、视频资料等数字内容时&#xff0c;没有专业工具的支持&#xff0c;效率与准确性都会受到挑战。此时&#xff0c;内容管理系统&#xff08;CMS&#xff09;应运…

文献查找任务及其方法

1. 必备网站&#xff1a; 谷歌学术 Web of Science Engineering Village CNKI翻译助手 科研通 2. 任务 学术上的一个调研&#xff0c;自动驾驶 3d 目标检测 方向的近7年的方法&#xff0c;模态&#xff08;相机/雷达/相机雷达 等&#xff09;&#xff0c;及其使用的数据集&a…

鸿蒙的NDK开发初级入门篇

初级必备的知识&#xff1a; NDK开发在什么时候用&#xff1f; 答&#xff1a;&#xff1a;NDK 开发在帮助应用提升性能的情况下使用&#xff0c;比如游戏开发&#xff0c;和硬件交互的场景中。 还有一个公司已经有标准的C或C库&#xff0c;不想在开发ArkTS的代码前提下。 开发…

Unity发布Windows平台后通过Advanced Installer制作安装包

Unity发布Windows平台后是一堆库资源&#xff0c;以及一个可执行的exe文件&#xff0c;并不是一个安装包&#xff0c;如果需要制作成安装包&#xff0c;需要再进一步打包&#xff0c;本篇文章介绍一个Advanced Installer的软件&#xff0c;专门用来制作Windows平台的安装包的。…

代数基本定理

代数基本定理 多项式 f(z)anznan−1zn−1⋯a1za0f(z) a_n z^n a_{n-1} z^{n-1} \cdots a_1 z a_0f(z)an​znan−1​zn−1⋯a1​za0​&#xff08;其中 n>1n > 1n>1 且 an,a0≠0a_n,a_0 \neq 0an​,a0​0&#xff09;在复数域内有根。 约定 以 ttt 为参数的闭曲…

springboot快速集成对接本地Ollama里的Deepseek-R1

书接上回&#xff0c;我们在本地安装了一个Ollama&#xff0c;然后下载了一个deepseek-r1:7b&#xff0c;传送门 本次目标&#xff1a;使用springboot对接ollama&#xff0c;完成简单api对接 1.创建一个项目&#xff0c;选择JDK17&#xff0c;Spring Boot版本3.5.3&#xff0c…

Docker部署私有仓库

环境信息 centos7&#xff1a;docker26.1.4 IP&#xff1a;192.168.12.134 部署harbor wget https://github.com/goharbor/harbor/releases/download/v2.13.1/harbor-offline-installer-v2.13.1.tgz curl -L "https://github.com/docker/compose/releases/download/1.29.2…

张艺兴探班RED女团一周年舞台,见证21岁的梦想落地生根

从青涩的男团偶像&#xff0c;到如今独当一面的音乐制作人、公司老板&#xff0c;张艺兴的每一步都踏得坚定有力&#xff0c;他的故事充满了热血与梦想的色彩。而最近&#xff0c;他探班RED女团一周年舞台现场的举动&#xff0c;又一次成为粉丝和大众热议的焦点&#xff0c;也让…

网络编程 JAVA

一.网络编程1. 什么是网络编程&#xff1f;网络编程是指利用计算机网络实现程序之间通信的一种编程方式。在网络编程中&#xff0c;程序需要通过网络协议&#xff08;如 TCP/IP&#xff09;来进行通信&#xff0c;以实现不同计算机之间的数据传输和共享。2. 三个基本要素①IP …

UE5中的cesium

官方Fab地址&#xff08;https://www.fab.com/zh-cn/&#xff09;&#xff0c;每月可下载免费素材 在UE5中添加插件cesium for unreal&#xff0c; 知识点一&#xff1a;服务器部署.b3dm地形数据 通过在线链接访问数据目录tileset.json&#xff0c;在cesium for unreal添加空白…

持续优化小程序排名,稳定获取搜索流量

一、建立动态关键词管理机制周期性关键词迭代每月通过平台搜索分析工具&#xff08;如微信小程序后台&#xff09;抓取用户搜索词趋势&#xff0c;淘汰搜索量下降的关键词&#xff0c;补充行业热点词与长尾需求词。按 “核心词 季节 / 场景词” 动态调整名称与简介&#xff08…

MyBatis 进阶:连接池、动态 SQL 与多表关联查询

MyBatis 作为一款灵活的持久层框架&#xff0c;除了基础的 CRUD 操作&#xff0c;还提供了连接池管理、动态 SQL 以及多表关联查询等高级特性。本文将从连接池原理出发&#xff0c;深入讲解动态 SQL 的常用标签&#xff0c;并通过实例演示一对多、多对多等复杂关联查询的实现&a…

反射型跨站点脚本(XSS)漏洞中网络安全防火墙(WAF)被绕过进行内容植入与远程劫持机制分析

在一次安全测试中&#xff0c;我发现目标站点在错误处理页面对用户输入的查询参数名未做任何转义&#xff0c;当参数名中包含 <script> 标签时&#xff0c;页面会原样渲染并执行其中的 JavaScript。本文将从实战角度&#xff0c;详细讲解如何定位该反射型 XSS 漏洞、通过…

RAG实战指南 Day 15:多语言与领域特定嵌入技术

【RAG实战指南 Day 15】多语言与领域特定嵌入技术 引言 欢迎来到"RAG实战指南"系列的第15天&#xff01;今天我们将深入探讨多语言与领域特定嵌入技术——这是构建全球化、专业化RAG系统的关键技术。在现实业务场景中&#xff0c;我们经常需要处理多种语言的文档&a…

无铅PCB和无卤pcb有什么区别?

在电子制造领域&#xff0c;环保法规的升级催生了多种特殊工艺的PCB产品。其中&#xff0c;无铅PCB与无卤PCB作为两大主流方向&#xff0c;虽同属绿色制造范畴&#xff0c;却在技术路径与应用场景上存在本质差异。环保指向的根本区别无铅PCB的核心在于焊接材料的革新。传统PCB采…

基于51单片机的贪吃蛇游戏Protues仿真设计

目录 1 系统设计目的 2 系统实现功能 3 系统硬件设计 3.1系统设计框图 3.2 液晶显示模块LCD12864 3.3 按键输入模块 3.4 时钟电路和复位电路 4 系统软件设计 4.1系统软件流程 4.2 游戏引擎模块程序设计 4.3 显示模块程序设计 4.4 输入处理模块程序设计 5 系统仿真…

HTML+CSS

一、HTML相关内容- <img> 标签&#xff1a;- 用于在网页中嵌入图像&#xff0c; src 属性指定图像的路径&#xff0c;可以是绝对路径&#xff08;如 D:\Git\java115_java116\课堂代码\前端代码\pic\cat.jpg &#xff09;、相对路径&#xff08;如 ./pic/cat.jpg &#x…

基于 Gitlab、Jenkins与Jenkins分布式、SonarQube 、Nexus 的 CiCd 全流程打造

前言 在当今数字化飞速发展的时代&#xff0c;软件开发与交付的效率和质量成为了企业竞争的关键要素。为了满足市场对软件快速迭代和高质量交付的需求&#xff0c;越来越多的企业开始探索和实践持续集成与持续交付&#xff08;CI/CD&#xff09;的开发模式。而 GitLab、Jenkin…

[密码学实战]密评相关题库解析

[密码学实战]密评相关题库解析 一、背景 依据《密码法》第二十二条&#xff0c;关键信息基础设施&#xff08;关基&#xff09;运营者必须开展商用密码应用安全性评估&#xff0c;且需定期进行&#xff08;不少于每年一次&#xff09;。 二、核心解析 2.1 测评标准框架&#x…