uni-app video组件show-center-play-btn设置为false无效并且重播按钮只能重播最后三秒

uni-app video组件show-center-play-btn设置为false无效并且重播按钮只能重播最后三秒

示例代码：

<video class="videoContent-video" :src="src"  
controls show-fullscreen-btn id="myVideo"  
play-strategy="1" :initial-time="1" :show-center-play-btn="false"></video>

操作步骤：

<video class="videoContent-video" :src="src"  
controls show-fullscreen-btn id="myVideo"  
play-strategy="1" :initial-time="1" :show-center-play-btn="false"></video>

预期结果：

  • 播放完毕后，点击重播从0开始播放

实际结果：

  • 播放完毕后，点击重播从最后三秒开始播放，并且设置show-center-play-btn为false，中间按钮还是会显示。

bug描述：

  • video组件show-center-play-btn设置为false无效，并且重播按钮只能重播最后三秒。

| 信息类别           | 信息内容         |
|-------------------|------------------|
| 产品分类           | uniapp/App       |
| PC开发环境操作系统 | Windows          |
| PC开发环境版本号   | 11               |
| HBuilderX类型      | 正式             |
| HBuilderX版本号    | 4.75             |
| 手机系统           | Android          |
| 手机系统版本号     | Android 13       |
| 手机厂商           | 小米             |
| 手机机型           | 红米k20pro       |
| 页面类型           | vue              |
| vue版本            | vue2             |
| 打包方式           | 云端             |
| 项目创建方式       | HBuilderX        |

更多关于uni-app video组件show-center-play-btn设置为false无效并且重播按钮只能重播最后三秒的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

复现视频在最后。

更多关于uni-app video组件show-center-play-btn设置为false无效并且重播按钮只能重播最后三秒的实战教程也可以访问 https://www.itying.com/category-93-b0.html


app 不支持 show-center-play-btn，重播时间问题，相关同事会看一下

重播时间问题，麻烦后面给下反馈

这是一个已知的uni-app video组件在Android平台上的兼容性问题。show-center-play-btn属性在某些Android机型上确实存在失效的情况，这主要是由于底层原生播放器实现差异导致的。

对于重播按钮只能重播最后三秒的问题，建议通过以下方式解决：

<video 
  class="videoContent-video" 
  :src="src" 
  controls 
  show-fullscreen-btn 
  id="myVideo"
  play-strategy="1" 
  :initial-time="1" 
  :show-center-play-btn="false"
  @ended="handleVideoEnd"
></video>

在methods中添加：

handleVideoEnd() {
  const videoContext = uni.createVideoContext('myVideo')
  setTimeout(() => {
    videoContext.seek(0)
    videoContext.play()
  }, 100)
}

这样可以确保视频播放结束后能够正确回到起始位置重新播放。对于中间播放按钮显示的问题，目前建议通过CSS样式覆盖来隐藏：

.videoContent-video ::v-deep .uni-video-center-play-btn {
  display: none !important;
}
回到顶部