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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

### 如何在 UniApp 中通过代码控制 Video 组件实现手动静音 为了实现在 UniApp 应用程序中对 `video` 组件的手动静音功能,可以利用 Vue.js 提供的数据绑定特性以及事件处理机制来改变视频的声音状态。下面展示了一个具体的例子,在这个例子中,当点击按钮会切换视频的静音属性。 #### 修改后的模板部分 ```html <template> <view class="content"> <!-- 使用v-bind动态绑定muted属性 --> <video :src="videoSrc" :autoplay="true" :muted="isMuted" id="video" @fullscreenchange="handleFullscreenChange" ></video> <!-- 添加一个用于切换静音状态的按钮 --> <button @click="toggleMute">Toggle Mute</button> </view> </template> ``` #### 脚本逻辑调整 ```javascript <script> export default { data() { return { isMuted: true, // 初始状态下设为静音 videoSrc: "../../static/div3-modal.mp4", }; }, methods: { handleFullscreenChange(event){ console.log(event.detail.fullScreen); this.isMuted = !event.detail.fullScreen; }, toggleMute(){ // 反转当前的静音状态 this.isMuted = !this.isMuted; } } }; </script> ``` 上述代码实现了两个主要的功能: - 当用户点击“Toggle Mute”按钮,`toggleMute()` 方法会被调用来反转 `isMuted` 数据项的状态,从而达到切换静音的效果[^1]。 -全屏变化的候自动取消静音操作,这与原始需求相匹配,即非全屏模式下默认静音而全屏则开启声音。 这种设计不仅满足了最初的需求——允许开发者根据应用程序的具体情况灵活地管理视频播放的行为,同也保持了良好的用户体验[^2]。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值