uni-app H5的video组件，全屏无法横屏播放

uni-app H5的video组件，全屏无法横屏播放

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/H5

浏览器平台： Chrome

浏览器版本： 87.0.4280.88

示例代码：

<video ref="myVideo" [@play](/user/play)="videoPlay" [@click](/user/click)="videoClick" [@controlstoggle](/user/controlstoggle)="ctrlToggle" :show-center-play-btn="true"  id="videoPlayer"
x5-video-player-type="h5-page" x5-video-player-fullscreen="true" x5-video-orientation="landscape"
playsinline webkit-playsinline
style="position: relative; width: 100%; height: 400rpx; transform: rotateY;"
[@fullscreenchange](/user/fullscreenchange)="videoFullScreenChange"  
>
</video>

操作步骤：

运行即可

预期结果：

全屏时进入横屏播放

实际结果：

全屏时，还是竖屏播放

bug描述：

H5的video组件，在nvue中，全屏的时候无法横屏播放，在app里面是可以的，有没有解决方案？太糟心了。我试了直接用css翻转也不行。


更多关于uni-app H5的video组件，全屏无法横屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

H5吗？ 文档已说明不支持 因为浏览器未提供相关控制接口

更多关于uni-app H5的video组件，全屏无法横屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的吧。那只能这样了。APP倒是一全屏就横屏播放了。

你好，可以发一下文档说明的链接吗

回复 katrina: 我也没找到

回复 2***@qq.com: https://uniapp.dcloud.io/component/video 第十六行

你好，微信公众号里面的video 全屏按钮也不会横屏播放吗

楼主知道哪个文档有明确说明不支持吗？找了好久没找着

https://uniapp.dcloud.io/component/video 第十六行

webapp之前是可以的，但是我把安卓SDK更新之后就不行了

这个怎么说呢，我写的是 公众号的H5 有些手机是可以全屏后自动横屏，有些手机又不行

uniapp web-view android 网页video 无法横屏 解决办法：https://blog.csdn.net/Li_Tao00/article/details/122133924

在uni-app H5环境下，video组件全屏横屏播放确实存在兼容性问题。这是由于浏览器对全屏API的限制导致的。建议尝试以下解决方案：

  1. 使用screen.orientation API强制横屏：
videoFullScreenChange(e) {
  if(e.detail.fullScreen) {
    if(screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape')
        .catch(() => console.log('锁定横屏失败'))
    }
  }
}
  1. 添加CSS媒体查询强制横屏样式：
[@media](/user/media) screen and (orientation: portrait) {
  video:-webkit-full-screen {
    transform: rotate(90deg);
    width: 100vh;
    height: 100vw;
  }
}
回到顶部