视频页面后台播放按钮问题记录

问题描述

在视频播放页面，右上角显示一个后台音频播放按钮图标，点击后无响应，影响用户体验。

图片.png

调查与原因

通过查阅官方文档，发现以下信息：

• show-background-playback-button
  • 功能：控制是否展示后台音频播放按钮。
  • 默认值：true（基础库 3.6.0 起）。
  • 限制：鸿蒙 OS 暂不支持此功能。
• 推测：因为设置了全屏显示video 导致全屏和后台音频播放按钮都失效。如果是小尺寸展示，这些按钮就正常使用了。

解决方案

将 show-background-playback-button 设置为 false，禁用后台播放按钮，同时根据需求禁用全屏按钮（show-fullscreen-btn）。调整后的代码如下：

<video
  id="video"
  src="{{videoSrc}}"
  style="width: 100vw; height: 100vh;"
  bind:play="onVideoPlay"
  bind:pause="onVideoPause"
  bind:ended="onVideoEnd"
  show-background-playback-button="{{false}}"
  show-fullscreen-btn="{{false}}"
></video>