uniapp如何设置h5播放器video全屏时自动翻转横屏

在uniapp开发的H5页面中，如何实现video组件全屏播放时自动横屏显示？目前安卓和iOS设备全屏后默认保持竖屏，需要手动旋转屏幕才能横屏观看，体验较差。请问是否有配置参数或API可以强制横屏？或者需要通过CSS或JS监听全屏事件来实现？求具体实现方案。

2 回复

在uniapp中，设置video全屏时自动横屏，可在page.json中配置：

"pageOrientation": "auto"

同时确保video组件设置full-screen属性为true。这样全屏时会自动横屏。


在UniApp中，要实现H5播放器全屏时自动横屏，可以通过监听全屏事件并调用设备横屏API实现。由于H5环境限制，需要使用plus.screen和plus.orientation（需在App端或支持的环境中使用），同时结合Web的Fullscreen API。

以下是实现步骤和示例代码：

步骤：

  1. 监听全屏事件：使用H5的Fullscreen API监听video元素的全屏状态变化。
  2. 触发横屏：在全屏时调用plus.orientation.lock方法锁定横屏（仅App端有效）。
  3. 处理兼容性：检查环境支持，避免在非App端出错。

示例代码：

在UniApp的Vue页面中，添加以下代码：

<template>
  <view>
    <video 
      id="myVideo" 
      src="your-video-source" 
      controls 
      @fullscreenchange="onFullscreenChange"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onFullscreenChange(e) {
      // 检查是否进入全屏
      const videoElement = document.getElementById('myVideo');
      if (document.fullscreenElement === videoElement) {
        // 全屏时横屏（仅App端有效）
        if (window.plus && plus.orientation) {
          plus.orientation.lock('landscape-primary'); // 锁定横屏
        }
      } else {
        // 退出全屏时恢复竖屏（可选）
        if (window.plus && plus.orientation) {
          plus.orientation.unlock(); // 解锁方向
        }
      }
    }
  },
  mounted() {
    // 确保video元素可监听全屏事件
    const videoElement = document.getElementById('myVideo');
    if (videoElement) {
      videoElement.addEventListener('fullscreenchange', this.onFullscreenChange);
    }
  },
  beforeDestroy() {
    // 清理事件监听
    const videoElement = document.getElementById('myVideo');
    if (videoElement) {
      videoElement.removeEventListener('fullscreenchange', this.onFullscreenChange);
    }
  }
}
</script>

注意事项：

  • 环境限制：plus.orientation仅在App端（通过HBuilderX打包）可用，H5普通浏览器无法直接控制设备方向。
  • 用户权限：横屏操作可能需要用户授权，且部分浏览器可能限制自动横屏。
  • 兼容性测试：在不同设备和浏览器上测试，确保全屏事件正确触发。

如果仅在H5环境（非App）需要横屏，可尝试使用CSS旋转模拟横屏效果，但无法强制设备方向。建议优先在App端使用此功能。

回到顶部