uni-app video组件使用mp3时，poster在播放状态显示为黑屏，苹果8及以上机型均受影响

uni-app video组件使用mp3时，poster在播放状态显示为黑屏，苹果8及以上机型均受影响

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.2.12

浏览器平台：

微信内置浏览器

项目创建方式：

HBuilderX

示例代码：

<video id="myVideo3"
src="https://ct-sycdn.kuwo.cn/1d5bead7aeadb1f260df3698b807261f/619c54d6/resource/n3/92/97/2720978050.mp3"
poster="https://ksb-1253359580.file.myqcloud.com/college/logo/2021/11/45c69dd714ec0eac8637e33f43d73339.png"  
>
</video>

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

video组件使用mp3，poster在播放时是黑的一片，苹果8以上机型都是黑的，真机测试安卓没问题

Image 1 Image 2


更多关于uni-app video组件使用mp3时，poster在播放状态显示为黑屏，苹果8及以上机型均受影响的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video组件使用mp3时，poster在播放状态显示为黑屏，苹果8及以上机型均受影响的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是iOS Safari浏览器对<video>组件播放音频文件（如MP3）时，poster属性在播放状态下的兼容性问题。在iOS上，当<video>播放纯音频时，播放器控件会隐藏，但poster可能被错误地处理为黑屏或空白区域。

原因分析： iOS的<video>组件在播放音频时，默认会隐藏播放器界面，但poster可能被系统视为视频画面区域。由于MP3没有视频轨道，该区域可能被渲染为黑色。

解决方案：

  1. 使用自定义播放器控件：通过controls属性设置为false，隐藏原生控件，使用自定义按钮控制播放，并通过@play事件切换显示自定义封面或占位图。

    <video 
  :src="audioUrl" 
  :poster="posterUrl"
  :controls="false"
  @play="onPlay"
></video>
<image v-if="!isPlaying" :src="posterUrl" />

    在onPlay方法中切换isPlaying状态，隐藏自定义封面。

  2. 使用audio组件替代：如果不需要poster，直接使用<audio>组件播放MP3，避免兼容性问题。

  3. 动态切换poster：在播放时通过ref动态清空poster属性，暂停时恢复。

    onPlay() {
  this.$refs.video.poster = '';
}
回到顶部