uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放
uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 3.1.22 | HBuilderX |
操作步骤:
视频全屏横屏播放 分享微信 返回会变成竖屏播放
预期结果:
无需改变视频播放格式
实际结果:
变成了竖屏播放
bug描述:
video全屏播放时点击分享微信 返回 视频会变成竖屏播放
更多关于uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的页面方向管理问题。当视频全屏横屏播放时,系统会强制横屏;通过分享功能跳转到微信再返回时,系统方向状态可能没有正确恢复。
解决方案:
-
监听页面显示/隐藏事件
在onShow生命周期中,重新设置视频方向为横屏:onShow() { // 强制横屏 plus.screen.lockOrientation("landscape"); } -
使用
orientation事件监听
监听方向变化并保持横屏:onLoad() { // 监听方向变化 plus.screen.lockOrientation("landscape"); window.addEventListener("orientationchange", this.handleOrientation); }, methods: { handleOrientation() { // 确保保持横屏 plus.screen.lockOrientation("landscape"); } } -
视频组件配置
确保video组件设置了正确的方向属性:<video :direction="90" :page-gesture="true" @fullscreenchange="handleFullscreen"> </video> -
分享返回后的恢复处理
在分享返回的钩子中强制刷新视频状态:onHide() { // 页面隐藏时解锁方向 plus.screen.unlockOrientation(); }, onShow() { // 重新锁定横屏 plus.screen.lockOrientation("landscape"); // 触发视频重新适配 this.$nextTick(() => { // 重新设置视频全屏状态 }); }

