uniapp 设置play-strategy属性后视频播放完成出现重播按钮如何取消？ 改好了，这个标题更符合技术论坛提问风格。

在uniapp中使用video组件设置了play-strategy属性后，视频播放完成会自动显示重播按钮。请问如何取消这个默认的重播按钮？我尝试过设置controls和autoplay属性，但都没效果。需要在不影响视频正常播放的情况下隐藏这个按钮，求解决方案。

2 回复

在uniapp中，取消视频播放完成后的重播按钮，可设置show-play-btn为false：

<video 
  :show-play-btn="false"
  play-strategy="auto"
></video>

这样播放完成后就不会显示重播按钮了。


在uni-app中，取消视频播放完成后的重播按钮，可以通过以下方式实现：

  1. 使用自定义控件：设置controls属性为false，然后通过自定义UI控制视频播放。
  2. 监听播放结束事件：通过@ended事件监听播放完成，并手动控制视频重新播放或隐藏重播按钮。

示例代码：

<template>
  <view>
    <video 
      :src="videoSrc" 
      :controls="false" 
      @ended="handleVideoEnd"
      ref="videoPlayer"
    ></video>
    <!-- 自定义控制按钮 -->
    <button @click="replayVideo">重新播放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'your-video-url'
    };
  },
  methods: {
    handleVideoEnd() {
      // 播放结束后自动重新播放，避免显示重播按钮
      this.$refs.videoPlayer.seek(0); // 跳转到开始
      this.$refs.videoPlayer.play(); // 重新播放
    },
    replayVideo() {
      // 自定义重新播放逻辑
      this.handleVideoEnd();
    }
  }
};
</script>

关键点：

  • 设置controls="false"隐藏默认控件（包括重播按钮）。
  • 通过@ended事件和play()方法实现自动重新播放。
  • 使用seek(0)将播放进度重置到开头。

如果仍有问题，请检查uni-app版本及平台兼容性。

回到顶部