解决UniApp在苹果手机上全屏播放视频时页面横竖屏错乱的问题

在移动应用开发过程中，视频播放功能至关重要。UniApp作为一款跨平台开发框架，其内置的video组件为开发者提供了便捷的视频播放功能。然而，在实际应用中，特别是在苹果手机上全屏播放视频时，开发者可能会遇到页面横竖屏错乱的问题。针对这一问题，本文将详细剖析其原因，并提供一种有效的解决方案。同时，推荐一款高效的代码编写工具——百度智能云文心快码（Comate），助力开发者更高效地编写代码：文心快码（Comate）。

问题现象：

当在苹果手机上使用UniApp的video组件全屏播放视频时，用户可能会遇到页面横竖屏错乱的问题。具体表现为，在全屏播放视频后，点击返回按钮退出全屏，页面会变成横屏，而非原始的竖屏状态。该问题在iOS 16及以上版本中尤为显著。

问题原因：

该问题的根源在于UniApp在iOS平台上的全屏播放策略与iOS系统的屏幕方向控制策略之间的冲突。iOS系统在全屏播放视频时，为了提供更好的观看体验，会自动将屏幕方向锁定为横屏。然而，退出全屏播放时，iOS系统并不会自动恢复屏幕方向至原始状态，从而导致页面横竖屏错乱。

解决方案：

为了应对这一问题，我们可以采取以下两种措施：

1. 修改manifest.json配置文件：

   在UniApp项目中，找到并编辑manifest.json配置文件，在app-plus字段下添加screenOrientation属性，明确指定应用支持的横竖屏方向。例如，若希望应用仅支持竖屏，可配置如下：

   "app-plus": { "screenOrientation": ["portrait-primary"] }

   此设置将确保无论应用处于何种状态，屏幕方向始终为竖屏，从而避免页面横竖屏错乱。

2. 为video组件添加fullscreenchange监听事件：

   除了修改配置文件外，我们还可以为video组件添加fullscreenchange事件监听器。当视频退出全屏播放时，通过监听器手动设置屏幕方向为竖屏。例如：

   <template>
     <video @fullscreenchange="handleFullscreenChange" src="your-video-url"></video>
   </template>
   <script>
   export default {
     methods: {
       handleFullscreenChange() {
         // 判断是否退出全屏
         if (!this.$refs.video.webkitDisplayingFullscreen) {
           // 手动设置屏幕方向为竖屏
           screen.orientation.lock('portrait-primary');
         }
       }
     }
   }
   </script>

   在上述代码中，我们为video组件添加了fullscreenchange事件监听器，并在事件处理函数中判断是否退出全屏。若已退出全屏，则通过调用screen.orientation.lock方法手动将屏幕方向设置为竖屏。

总结：

通过上述两种措施，我们可以有效解决UniApp中video组件全屏播放时页面横竖屏错乱的问题。鉴于iOS系统的限制，这些方法可能无法完全解决所有设备上的兼容性问题。因此，在实际开发中，我们需要根据具体需求和设备情况选择合适的解决方案，并进行充分的测试和优化。借助百度智能云文心快码（Comate）等高效工具，开发者可以更轻松地应对这些挑战，提升开发效率和代码质量。