uniapp横屏直播

uniapp实现横屏直播的方法

在uniapp中实现横屏直播需要调整页面方向和播放器设置。以下是具体实现步骤：

调整页面横屏显示

修改pages.json配置文件，在对应页面的style中添加横屏设置：

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

使用直播组件

推荐使用video组件实现直播播放，设置全屏和横屏属性：

<template>
  <view class="live-container">
    <video 
      id="liveVideo"
      src="直播流地址"
      controls
      autoplay
      style="width:100%;height:100vh;"
      :enable-progress-gesture="false"
      :show-fullscreen-btn="false"
      :show-center-play-btn="false"
    ></video>
  </view>
</template>

处理横屏样式

添加CSS确保全屏显示：

.live-container {
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg);
  transform-origin: 0 0;
  position: absolute;
  top: 100%;
  left: 0;
}

Android/iOS适配

在App.vue的onLaunch中添加设备方向锁定代码：

// #ifdef APP-PLUS
plus.screen.lockOrientation("landscape-primary");
// #endif

直播流处理

对接常见直播协议：

• RTMP流：适合低延迟场景
• HLS流：兼容性更好
• FLV流：网页端常用

示例代码获取直播流：

const liveContext = uni.createVideoContext('liveVideo');
liveContext.play();

横屏状态管理

监听设备旋转事件：

onReady() {
  uni.onWindowResize((res) => {
    if(res.size.windowWidth > res.size.windowHeight) {
      console.log('横屏状态');
    }
  });
}

注意事项

1. 测试时使用真实设备，模拟器可能不支持方向感应
2. 直播流地址需要支持跨域访问
3. iOS需要配置UISupportedInterfaceOrientations
4. 部分Android机型需要单独处理全屏逻辑

以上方法可以实现uniapp中的横屏直播功能，实际开发中需根据具体直播协议和业务需求调整实现细节。