如何使用Plyr播放器实现仅音频播放并全程展示背景图？

由于你用<video>标签加载MP3文件，Plyr默认会在播放开始后隐藏data-poster指定的海报图，导致全屏时显示黑屏。以下两种方案可以实现类似Insight Timer的效果，全程保留背景图、控件和全屏功能：

方案一：自定义容器叠加背景图（推荐） #

通过外层容器设置背景图，让透明化的Plyr控件叠加在背景上方，这种方式无需修改Plyr核心逻辑，兼容性更好。

步骤1：修改HTML结构 #

用自定义容器包裹Plyr播放器，直接给容器设置背景图：

<div class="meditation-player-container" style="background: url('你的背景图地址') center/cover no-repeat;">
  <video id="meditation-player" playsinline controls>
    <source src="你的MP3文件地址" type="audio/mpeg" />
  </video>
</div>

步骤2：添加CSS样式 #

调整Plyr的背景透明度，确保背景图能透出来，同时适配全屏状态：

.meditation-player-container {
  position: relative;
  width: 100%;
  max-width: 900px; /* 按需调整播放器默认宽度 */
  aspect-ratio: 16/9; /* 模拟视频比例，让全屏显示更自然 */
  border-radius: 8px; /* 可选，优化外观 */
  overflow: hidden;
}

/* 让音频模式下的Plyr背景透明 */
.plyr--audio.plyr--full-ui {
  background-color: transparent !important;
}

.plyr__video-wrapper {
  background-color: transparent !important;
}

/* 全屏时让容器占满整个屏幕 */
.plyr--fullscreen .meditation-player-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: unset;
  border-radius: 0;
  z-index: 9999;
}

方案二：通过Plyr事件强制保留海报图 #

利用Plyr的事件API，在播放和全屏状态下强制显示海报图，适合需要复用data-poster属性的场景。

步骤1：初始化Plyr并绑定事件 #

const player = new Plyr('#meditation-player', {
  controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
  // 按需配置其他选项
});

// 播放时强制显示海报图
player.on('play', () => {
  const posterEl = player.elements.poster;
  if (posterEl) {
    posterEl.style.display = 'block';
    posterEl.style.zIndex = 1; // 确保控件在海报上方
    player.elements.container.style.zIndex = 2;
  }
});

// 退出播放时保持海报图（可选，根据需求调整）
player.on('pause', () => {
  const posterEl = player.elements.poster;
  if (posterEl) {
    posterEl.style.display = 'block';
  }
});

// 全屏时调整海报图尺寸适配屏幕
player.on('enterfullscreen', () => {
  const posterEl = player.elements.poster;
  if (posterEl) {
    posterEl.style.width = '100vw';
    posterEl.style.height = '100vh';
    posterEl.style.objectFit = 'cover';
  }
});

注意事项 #

• 若使用方案二，需确保Plyr版本兼容（测试基于v3.x版本），不同版本的元素类名或事件可能略有差异。
• 两种方案都可以配合Plyr的自定义控件配置，进一步匹配Insight Timer的界面风格。

内容的提问来源于stack exchange，提问作者Manny Ribera