uniapp h5 视频画面旋转90度如何实现

在uniapp开发的H5页面中，如何实现视频画面旋转90度的效果？我用video组件播放的视频需要横向展示，但原始视频是竖屏拍摄的，导致画面显示方向错误。尝试过CSS的transform旋转，但视频控件位置和触摸区域也跟着旋转了，不符合需求。请问有没有办法只旋转视频画面本身，保持控件正常显示？需要兼容主流移动端浏览器。

2 回复

在uniapp的H5页面中，可以使用CSS的transform属性旋转视频。例如：

video {
  transform: rotate(90deg);
}

或者通过JS动态设置：

document.querySelector('video').style.transform = 'rotate(90deg)'

注意：旋转后可能需要调整宽高和位置。


在 UniApp 的 H5 环境中，可以通过 CSS 的 transform 属性旋转视频画面。以下是具体实现方法：

  1. 给视频容器添加样式： 使用 CSS 的 transform: rotate(90deg) 将视频旋转 90 度。

  2. 示例代码：

    <template>
  <view class="video-container">
    <video
      src="/static/video.mp4"
      controls
      class="rotated-video"
    ></video>
  </view>
</template>

<style scoped>
.rotated-video {
  transform: rotate(90deg);
  transform-origin: center; /* 旋转中心点，默认为中心 */
  width: 100%; /* 根据旋转后尺寸调整 */
  height: auto;
}
</style>

  3. 注意事项：

    • 旋转后视频的宽高比例会变化，可能需要调整容器尺寸。
    • 如果视频控制条方向异常，可尝试包裹一层容器并对容器旋转。
    • 测试不同浏览器的兼容性，必要时添加 -webkit-transform 等前缀。

如果视频源本身方向不正确，可能需要通过 uni.createVideoContext 动态调整，但 H5 对 API 支持有限，优先推荐 CSS 方案。

回到顶部