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

uni-app解决video组件全屏时页面横竖错乱问题

使用 video组件播放视频时,在苹果手机上全屏后页面横竖屏错乱,点击返回按钮退出全屏,页面变成横屏,在iOS16 以上都会出现这个问题。

解决方案

修改manifest.json配置文件

"app-plus" : {
    ...略
    "screenOrientation" : [
        //可选,字符串数组类型,应用支持的横竖屏
        "portrait-primary", //可选,字符串类型,支持竖屏
        "portrait-secondary", //可选,字符串类型,支持反向竖屏
        "landscape-primary", //可选,字符串类型,支持横屏
        "landscape-secondary" //可选,字符串类型,支持反向横屏
    ],
...
}

video 组件添加fullscreenchange监听事件,当退出全屏时手动设置竖屏。

<video class="detail_video" id="myVideo" :src="detail.video_url" @fullscreenchange="fullscreenchange" controls></video>
export default {
  data() {
    return {

    }
  },
  methods: {
	fullscreenchange(e){
		if(!e.detail.fullScreen){ // 退出全屏,锁定竖屏
			plus.screen.lockOrientation('portrait-primary');
		}
	},
  }
}


http://www.kler.cn/a/162384.html

相关文章:

  • 【Linux】-学习笔记03
  • 车-路-站-网”信息耦合的汽车有序充电
  • HelloMeme 上手即用教程
  • IEC60870-5-104 协议源码架构详细分析
  • 量化交易系统开发-实时行情自动化交易-3.4.2.Okex行情交易数据
  • CLion配置QT开发环境
  • Fiddler的配置、原理和使用
  • 爬虫-BeautifulSoup之XML篇
  • synxflow 安装环境
  • es6 相关面试总结
  • k8s引用环境变量
  • js数组删除某个元素
  • JS如何实现竖屏轮播图
  • 机器学习应用 | 使用 MATLAB 进行异常检测(上)
  • 贪吃的猴子 - 华为OD统一考试(C卷)
  • 【ArcGIS微课1000例】0078:创建点、线、面数据的最小几何边界
  • 贝蒂的捣蛋小游戏~(C语言)
  • 解决Ubuntu16.04没声音
  • 【若依框架实现上传文件组件】
  • 在装有 PostgreSQL 14 的 Red Hat8上安装 `pg_cron`
  • MTU TCP-MSS(转载)
  • 鸿蒙原生应用/元服务开发-新版本端云一体化模板体验反馈
  • 电商早报 | 12月8日|母婴电商宝贝格子北京总部已人去楼空
  • 基于SpringBoot+Vue学生成绩管理系统前后端分离(源码+数据库)
  • 网络编程基础api
  • Javascript 前端分页——根据页面大小(pageSize)和总行数(total)计算总页面数(totalPage)