uni-app 使用video标签播放mp3音频格式时，iphone13和iPhone 7P手机播放封面不显示，安卓和别的苹果型号显示正常，目前未发现问题

uni-app 使用video标签播放mp3音频格式时，iphone13和iPhone 7P手机播放封面不显示，安卓和别的苹果型号显示正常，目前未发现问题

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

操作步骤：

  • 用video标签播放mp3音频格式时 iphone13和iPhone 7P手机播放的时候封面不显示 安卓和别的苹果型号显示目前未发现问题

预期结果：

  • 希望兼容

实际结果：

  • 用video标签播放mp3音频格式时 iphone13和iPhone 7P手机播放的时候封面不显示 安卓和别的苹果型号显示目前未发现问题

bug描述：

  • 用video标签播放mp3音频格式时 iphone13和iPhone 7P手机播放的时候封面不显示 安卓和别的苹果型号显示目前未发现问题

App下载地址或H5网址：

浏览器平台：

  • Chrome

浏览器版本：

  • 版本 96.0.4664.45（正式版本） （64 位）

更多关于uni-app 使用video标签播放mp3音频格式时，iphone13和iPhone 7P手机播放封面不显示，安卓和别的苹果型号显示正常，目前未发现问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 使用video标签播放mp3音频格式时，iphone13和iPhone 7P手机播放封面不显示，安卓和别的苹果型号显示正常，目前未发现问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于iOS系统对video标签播放音频时的封面显示处理存在差异导致的。在iOS上，特别是某些型号（如iPhone 13和7P），系统可能默认不显示音频文件的封面，而安卓和其他苹果型号可能正常显示。

解决方案：

  1. 使用poster属性：为video标签添加poster属性，指定一个默认封面图片。例如：

    <video src="audio.mp3" poster="cover.jpg"></video>

    这能确保在iOS设备上显示自定义封面。

  2. 检查音频文件元数据：部分MP3文件可能缺少封面元数据，导致iOS无法解析。建议使用工具（如FFmpeg）为音频添加封面：

    ffmpeg -i audio.mp3 -i cover.jpg -map 0 -map 1 -c copy -id3v2_version 3 -metadata:s:v title="Cover" -metadata:s:v comment="Cover" output.mp3
回到顶部