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

本文描述了在苹果手机上使用video组件时,iOS16及以上版本出现的全屏横竖屏错乱问题,提供了通过修改`manifest.json`配置和添加fullscreenchange监听事件来解决的方法,确保退出全屏后页面锁定为竖屏显示。

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

### 解决 UniAppVideo 组件播放卡顿问题 #### 一、优化 Swiper 和 Video 的交互逻辑 为了防止视频未播放完毕就被切换走,可以监听 `swiper` 的变化事件并控制视频的暂停和播放。通过获取当前索引判断是否为视频项,并相应地管理视频状态。 ```javascript // 获取视频实例 this.player = uni.createVideoContext('myVideo'); methods: { swiperChange(event) { const currentIndex = event.detail.current; // 如果不是第一个页面则停止播放视频 if (currentIndex !== 0){ this.player.pause(); } else { this.player.play(); } }, } ``` 上述方法可以在每次滑动检查当前位置是否包含正在播放中的视频[^2]。 #### 二、延迟加载策略 对于不在视窗内的资源采用懒加载方式处理,即只有当元素即将进入可视区域才开始加载对应的媒体文件。这能显著减少初始渲染间以及不必要的网络请求开销。 ```html <template> <swiper @change="handleSwiperChange"> <!-- 动态绑定src属性 --> <swiper-item v-for="(item,index) in items" :key="index"> <video id="myVideo" :src="getSrc(item)" controls></video> </swiper-item> </swiper> </template> <script> export default{ data(){ return { currentIndex: 0, ... }; }, methods:{ handleSwiperChange(e){ let index=e.detail.current; this.currentIndex=index; }, getSrc(item){ return this.isInViewport(this.$refs[`slide-${this.currentIndex}`]) ? item.src : ''; }, isInViewport(ref){ var rect=ref.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or whatever*/ rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } } }; </script> ``` 此段代码实现了基于可见性的按需加载机制,从而减轻了因提前下载过多多媒体数据造成的性能负担[^1]. #### 三、预取与缓存技术的应用 适当利用浏览器自带的缓存功能来存储已访问过的视频片段,以便下次更快响应;也可以考虑实现自定义缓存方案,在应用层面保存热门或常用的内容副本。另外还可以尝试预先加载下一个待展示项目的部分内容,使得过渡更加平滑自然。 ---
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值