小程序 live-player 组件无法横屏全屏通常是因为组件属性 orientation 未设置为 horizontal 或页面配置 pageOrientation 缺失。解决方向是检查组件属性、页面 json 配置以及调用 requestFullScreen API 的时机，注意 iOS 系统需要用户交互才能触发全屏旋转。

命令速用版

快速处理思路是直接修改 WXML 组件属性并在页面配置中放开方向限制。以下代码片段可直接替换现有配置进行测试。

WXML 配置：

<live-player id="player" src="{{src}}" mode="live" orientation="horizontal" />

page.json 配置：

{"style": {"pageOrientation": "auto"}}

JS 调用全屏：

const player = wx.createLivePlayerContext('player');
player.requestFullScreen();

为什么会这样

组件默认竖屏，全屏旋转受系统权限限制。live-player 组件默认 orientation 值为 vertical，且全屏行为受操作系统屏幕方向策略管控，页面未授权横屏时组件无法强制旋转。

微信小程序运行在宿主环境中，屏幕方向由页面配置决定，组件内部属性仅控制视频流渲染方向。若页面锁定为竖屏，组件即使设置 horizontal 也无法触发系统级横屏效果。iOS 系统出于用户体验考虑，禁止非用户交互触发的屏幕旋转，因此自动播放时直接全屏往往无效。

分步处理

按顺序检查组件属性、页面配置、API 调用和基础库版本，每一步完成后需重新编译预览。

步骤 1：检查组件属性

在 WXML 中找到 live-player 标签，确认 orientation 属性显式设置为 horizontal。若缺失该属性，默认值为 vertical，会导致视频流本身不旋转。

步骤 2：检查页面配置

打开当前页面目录下的 page.json 文件，在 style 对象中添加 "pageOrientation": "auto"。若设置为 vertical，系统将拦截横屏请求。

步骤 3：检查 API 调用

使用 wx.createLivePlayerContext 获取上下文，在用户点击事件回调中调用 requestFullScreen 方法。避免在 onLoad 或 onReady 生命周期中自动调用，否则 iOS 端无响应。

步骤 4：检查基础库版本

确认开发者工具和真机基础库版本不低于 2.1.0。低版本基础库可能不支持 orientation 属性或 requestFullScreen 方法，需在项目配置中调整最低兼容版本。

怎么验证是否生效

通过真机预览观察屏幕旋转行为和控制台日志，确认无报错且画面方向正确。

视觉验证：点击全屏按钮后，手机屏幕是否跟随旋转，视频画面是否填满横屏区域。

日志验证：打开微信开发者工具 console 面板，观察是否有 live-player 相关报错。若调用 requestFullScreen 失败，通常会抛出权限或上下文错误。

状态验证：监听 live-player 的 state 事件，确认状态码变化符合预期，全屏状态下状态码应反映全屏激活。

常见坑

iOS 系统限制、CSS 容器大小和自动播放策略是导致配置失效的主要风险点。

iOS 交互限制：iOS 微信客户端禁止非用户手势触发的全屏旋转，必须绑定 tap 事件调用 API。

CSS 容器限制：live-player 父容器宽高若写死为竖屏比例，横屏后画面可能被裁剪或留黑边，建议使用 flex 或百分比布局。

自动播放冲突：若开启 autoplay 属性，部分机型可能因静音策略导致全屏失败，建议先 mute 再请求全屏。

层级遮挡：全屏模式下组件层级可能低于原生导航栏，需检查是否使用同层渲染属性或调整 z-index。

常见问题

iOS 点击全屏按钮无反应怎么办

必须确保点击事件是直接用户交互，不能在定时器或异步回调中调用 requestFullScreen。

横屏后画面有黑边如何处理

调整 live-player 的 object-fit 属性为 fillContain 或 fillCrop，确保视频流适配屏幕比例。

pageOrientation 设置 auto 会影响其他页面吗

不会，page.json 配置仅对当前页面生效，全局配置需在 app.json 中单独设置。

参考来源

微信小程序官方文档 - live-player 组件

URL: https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html