uni-app使用uniapp的视频播放组件video鸿蒙5.1版本的小程序横屏视频会变成竖屏

uni-app使用uniapp的视频播放组件video鸿蒙5.1版本的小程序横屏视频会变成竖屏

示例代码：

// 视频源
videoUrl: {
type: String,
required: true
},
// 封面图
coverUrl: {
type: String,
default: ''
},
// 视频ID
videoId: {
type: String,
default: () => '' + Date.now()
},
// 自动播放
autoplay: {
type: Boolean,
default: false
},
// 循环播放
loop: {
type: Boolean,
default: false
},
// 静音
muted: {
type: Boolean,
default: false
},
// 显示原生控制条
showControls: {
type: Boolean,
default: false
},
// 自定义控制条
customControls: {
type: Boolean,
default: true
},
// 视频适应模式
objectFit: {
type: String,
default: 'cover' // contain, cover, fill
},
// 显示中央播放按钮
showCenterPlayBtn: {
type: Boolean,
default: true
},
// 显示播放按钮
showPlayBtn: {
type: Boolean,
default: true
},
// 显示全屏按钮
showFullscreenBtn: {
type: Boolean,
default: true
},
// 显示进度条
showProgress: {
type: Boolean,
default: true
},
// 显示加载状态
showLoading: {
type: Boolean,
default: true
},
// 启用进度手势
enableProgressGesture: {
type: Boolean,
default: true
},
// 启用播放手势
enablePlayGesture: {
type: Boolean,
default: true
},
// 自定义控制按钮显示
showPlayPauseBtn: {
type: Boolean,
default: true
},
showProgressBar: {
type: Boolean,
default: true
},
showFullscreenButton: {
type: Boolean,
default: true
},

操作步骤：

使用鸿蒙5.1系统的手机，打开微信小程序就能复现

预期结果：

横屏，和安卓、苹果一样的效果

实际结果：

竖屏

bug描述：

使用uniapp的视频播放组件video，鸿蒙5.1版本的小程序横屏视频会变成竖屏

Image 1 Image 2 Image 3 Image 4 Image 5


更多关于uni-app使用uniapp的视频播放组件video鸿蒙5.1版本的小程序横屏视频会变成竖屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

试试原生微信小程序有没有这个问题

更多关于uni-app使用uniapp的视频播放组件video鸿蒙5.1版本的小程序横屏视频会变成竖屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


回复 未知名: 可以反馈到微信开发者社区

同问，楼主解决了没哦。
垃圾鸿蒙&垃圾微信小程序

解决了，uniapp的问题。换种写法就好了

这是一个鸿蒙5.1系统在微信小程序平台上的兼容性问题。从你提供的代码和截图来看，问题出现在横屏视频的方向识别上。

在鸿蒙5.1系统中，视频组件可能无法正确识别视频的原始方向信息，导致横屏视频被错误地以竖屏方式渲染。这通常与系统底层对视频元数据的解析有关。

建议尝试以下解决方案：

  1. 强制横屏显示：通过CSS样式强制视频容器横屏
.video-container {
  transform: rotate(90deg);
  width: 100vh;
  height: 100vw;
}
回到顶部