uni-app 4.36版本harmony next video组件全屏如何设置为横屏播放？

暂时还没有支持横屏播放

在uni-app 4.36版本中使用harmony next的video组件时，若要实现全屏时横屏播放，可以通过设置组件属性及配置页面样式来实现。以下是一个简单的代码案例，展示了如何在uni-app中实现这一功能。

1. 配置manifest.json

首先，确保在manifest.json中配置了应用支持屏幕方向：

{
  "mp-weixin": { // 以微信小程序为例，其他平台类似
    "appid": "your-app-id",
    "setting": {
      "screenOrientation": "auto" // 设置屏幕方向为自动，允许横竖屏切换
    }
  }
}

2. 页面样式设置

在页面的样式文件中（如index.vue的<style>部分），可以添加一些全局样式以确保全屏时横屏显示正确：

<style scoped>
/* 强制页面在横屏时全屏显示 */
@media screen and (orientation: landscape) {
  html, body, #app, .page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
}
</style>

3. 使用video组件

在页面的模板部分（如index.vue的<template>部分），使用video组件并配置相关属性：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="your-video-url.mp4"
      controls
      autoplay
      direction="landscape"
      @fullscreenchange="onFullscreenChange"
    ></video>
  </view>
</template>

4. 处理全屏变化事件

在页面的脚本部分（如index.vue的<script>部分），可以监听全屏变化事件，确保在全屏时强制横屏：

<script>
export default {
  methods: {
    onFullscreenChange(event) {
      const isFullscreen = event.detail.fullscreen;
      if (isFullscreen) {
        // 强制页面横屏（这里可能需要平台特定的API或逻辑）
        // 例如，在微信小程序中，可以通过wx.setScreenBrightness等API间接控制用户行为
        // 但直接控制屏幕方向通常依赖于系统或平台设置
        // 这里主要是示例，实际应用中可能需要根据平台文档进行调整
      }
    }
  }
}
</script>

注意：由于不同平台（如微信小程序、H5、App等）对屏幕方向的控制有所不同，上述代码中的direction="landscape"属性在uni-app的video组件中可能并不直接生效。实际应用中，需要结合具体平台的API和文档进行调整。例如，在微信小程序中，通常需要在app.json或页面配置中设置屏幕方向，并通过监听系统事件来处理屏幕方向的变化。