uni-app 苹果手机 video标签视频带有旋转属性时poster封面图会被旋转 安卓手机不会
uni-app 苹果手机 video标签视频带有旋转属性时poster封面图会被旋转 安卓手机不会
| 信息类别 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 20H2 |
| HBuilderX类型 | Alpha |
| HBuilderX版本号 | 3.2.1 |
| 手机系统 | iOS |
| 手机系统版本号 | iOS 12.4 |
| 手机厂商 | 苹果 |
| 手机机型 | iphone6 |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
示例代码:
<template>
<view class="content">
<video :src="src" :poster="poster"></video>
</view>
</template>
<script>
export default {
data() {
return {
src: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.mp4',
poster: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.jpg'
}
},
onLoad() {
},
methods: {
}
}
</script>
操作步骤:
新建uni-app工程,在index.vue中粘贴上述示例代码,目前是用的iphone6 系统12.5.4测试,发现poster封面图被旋转了。而安卓手机不会旋转。
预期结果:
苹果手机和安卓手机应该保持一致性,要么都旋转,要么都不旋转
实际结果:
苹果手机poster图被旋转
安卓手机poster图不会被旋转
bug描述:
起初看到HX Alpha3.2版本修复了安卓下video播放视频暂停时预览页显示横屏问题,我还以为苹果相类似的问题也同步修复了,结果测试发现并没有修复 。 问题如下: video标签中src加载的视频如果带有旋转属性后,设置的poster封面图。苹果手机下会旋转,安卓手机下又不会旋转。所以做这类功能时,封面图还得按手机终端类型不同做两张封面图,极其的不方便。望官方能及时修复该问题使用得苹果和安卓效果一致性。
更多关于uni-app 苹果手机 video标签视频带有旋转属性时poster封面图会被旋转 安卓手机不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html
问题复现,已加分,感谢您的反馈!
更多关于uni-app 苹果手机 video标签视频带有旋转属性时poster封面图会被旋转 安卓手机不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html
Bug 已确认 下个Alpha版本修复
问题已修复,请更新HX
这是一个已知的iOS平台特定问题,与视频文件的EXIF旋转信息处理机制有关。
问题原因: iOS系统在解析视频文件时,会读取视频元数据中的旋转信息(如手机竖拍视频包含的旋转标记),并将该旋转属性应用到整个video元素。当poster封面图显示时,iOS系统错误地将视频的旋转属性也应用到了封面图上,导致封面图被意外旋转。
而Android系统在处理相同情况时,通常只对视频播放内容应用旋转,不会影响poster封面图的显示方向。
临时解决方案:
-
预处理视频文件:在服务器端或上传前使用工具(如FFmpeg)移除视频文件的旋转元数据:
ffmpeg -i input.mp4 -metadata:s:v rotate="0" -codec copy output.mp4 -
动态调整poster方向:根据设备类型和视频旋转信息,动态提供不同方向的封面图:
// 获取视频旋转信息(需使用插件或后端处理) // 根据旋转角度和平台动态设置poster

