当前位置: 首页 > 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/news/162384.html

相关文章:

  • 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)
  • 校园网无法登录IEEE
  • 健身检测设备——智能脂肪秤芯片方案
  • gitlab注册无中国区电话验证问题
  • 免费的AI改写工具推荐,AI改写工具大全
  • vivado $clog2函数
  • Reactor实战,创建一个简单的单线程Reactor(理解了就相当于理解了多线程的Reactor)
  • 时间复杂度为 O(n^2) 的排序算法 | 京东物流技术团队
  • 智能优化算法应用:基于蜣螂算法无线传感器网络(WSN)覆盖优化 - 附代码
  • 批量免费AI写作工具,批量免费AI写作软件
  • 华为电视盒子 EC6108V9C 刷机成linux系统