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');
		}
	},
  }
}

相关推荐

  1. uni-app解决video页面横竖错乱问题

    2023-12-08 12:50:06       102 阅读
  2. 解决Unity WebGLInput插输入的问题

    2023-12-08 12:50:06       56 阅读
  3. Android 横竖切换 窗口

    2023-12-08 12:50:06       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-08 12:50:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-08 12:50:06       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-08 12:50:06       82 阅读
  4. Python语言-面向对象

    2023-12-08 12:50:06       91 阅读

热门阅读

  1. 头歌—Hive的安装与配置

    2023-12-08 12:50:06       58 阅读
  2. 解决使用ip来访问MySQL报错的问题

    2023-12-08 12:50:06       59 阅读
  3. Vue学习笔记-缓存路由组件

    2023-12-08 12:50:06       55 阅读
  4. vue的props

    2023-12-08 12:50:06       45 阅读
  5. 基于深度学习的典型目标跟踪算法

    2023-12-08 12:50:06       54 阅读
  6. 力扣面试150题 | 88.合并两个有序数组

    2023-12-08 12:50:06       49 阅读
  7. 使用qemu-nbd挂载qcow2/raw磁盘文件

    2023-12-08 12:50:06       66 阅读
  8. CentOS 7.9安装zabbix5.0.39LTS版本

    2023-12-08 12:50:06       41 阅读
  9. 力扣labuladong——一刷day68

    2023-12-08 12:50:06       56 阅读