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

4 回复

问题复现,已加分,感谢您的反馈!

更多关于uni-app 苹果手机 video标签视频带有旋转属性时poster封面图会被旋转 安卓手机不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html


Bug 已确认 下个Alpha版本修复

问题已修复,请更新HX

这是一个已知的iOS平台特定问题,与视频文件的EXIF旋转信息处理机制有关。

问题原因: iOS系统在解析视频文件时,会读取视频元数据中的旋转信息(如手机竖拍视频包含的旋转标记),并将该旋转属性应用到整个video元素。当poster封面图显示时,iOS系统错误地将视频的旋转属性也应用到了封面图上,导致封面图被意外旋转。

而Android系统在处理相同情况时,通常只对视频播放内容应用旋转,不会影响poster封面图的显示方向。

临时解决方案:

  1. 预处理视频文件:在服务器端或上传前使用工具(如FFmpeg)移除视频文件的旋转元数据:

    ffmpeg -i input.mp4 -metadata:s:v rotate="0" -codec copy output.mp4
    
  2. 动态调整poster方向:根据设备类型和视频旋转信息,动态提供不同方向的封面图:

    // 获取视频旋转信息(需使用插件或后端处理)
    // 根据旋转角度和平台动态设置poster
回到顶部