uniapp横屏直播

实现横屏直播的基本思路

在UniApp中实现横屏直播，需要调整页面为横屏模式，并确保直播组件适配横屏布局。以下是具体方法：

修改页面横屏配置

在pages.json中为直播页面配置横屏方向：

{  
    "path": "pages/live/live",  
    "style": {  
        "navigationBarTitleText": "直播",  
        "pageOrientation": "landscape" // 强制横屏  
    }  
}  

此配置仅对当前页面生效，其他页面仍保持默认竖屏。

动态切换横屏（可选）

若需运行时动态切换横屏，可通过plus.screen.lockOrientation实现：

// 锁定横屏  
plus.screen.lockOrientation('landscape-primary');  

// 恢复竖屏  
plus.screen.lockOrientation('portrait-primary');  

注意：此API需在真机调试，部分平台可能需额外权限。

直播组件适配横屏

使用<live-player>组件时，需通过CSS强制横屏布局：

<template>  
    <view class="live-container">  
        <live-player  
            src="直播流地址"  
            mode="live"  
            class="live-player"  
            autoplay  
        ></live-player>  
    </view>  
</template>  

<style>  
.live-container {  
    width: 100vh; /* 高度转宽度 */  
    height: 100vw; /* 宽度转高度 */  
    transform: rotate(90deg);  
    transform-origin: 0 0;  
    position: absolute;  
    top: 100%;  
    left: 0;  
}  
.live-player {  
    width: 100%;  
    height: 100%;  
}  
</style>  

此方法通过CSS旋转容器实现横屏效果，需注意调整布局逻辑。

注意事项

1. 兼容性测试：横屏配置在不同平台（iOS/Android）表现可能不同，需真机验证。
2. 导航栏隐藏：横屏时建议隐藏导航栏，通过"navigationStyle": "custom"配置。
3. 直播流协议：确保使用的直播流（如RTMP、HLS）支持横屏播放。

通过以上步骤可实现UniApp横屏直播功能，建议根据实际需求调整布局细节。