uniapp video重新播放不是从0开始如何解决？

在uniapp中使用video组件时，重新播放视频不是从0秒开始，而是接着上次的位置继续播放。即使调用了seek(0)方法也无法解决，请问如何让视频每次重新播放都强制从开头开始？

2 回复

在video标签中设置initial-time="0"，并监听播放结束事件，在结束时调用videoContext.seek(0)和videoContext.play()即可实现重新从0开始播放。


在uni-app中，video组件重新播放不是从0开始的问题，可以通过以下方法解决：

方法一：使用seek方法重置播放位置

<template>
  <view>
    <video 
      ref="myVideo" 
      :src="videoSrc" 
      @ended="onVideoEnd"
    ></video>
    <button @click="replayVideo">重新播放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '/static/video.mp4'
    }
  },
  methods: {
    // 重新播放视频
    replayVideo() {
      const videoContext = this.$refs.myVideo;
      videoContext.seek(0); // 跳转到0秒位置
      videoContext.play();  // 开始播放
    },
    // 视频播放结束时自动重新播放
    onVideoEnd() {
      this.replayVideo();
    }
  }
}
</script>

方法二：重新加载视频源（推荐）

<template>
  <view>
    <video 
      :src="currentSrc" 
      :key="videoKey"
      @ended="onVideoEnd"
    ></video>
    <button @click="replayVideo">重新播放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '/static/video.mp4',
      videoKey: 0
    }
  },
  computed: {
    currentSrc() {
      return this.videoSrc;
    }
  },
  methods: {
    replayVideo() {
      // 通过改变key强制重新渲染video组件
      this.videoKey += 1;
    },
    onVideoEnd() {
      this.replayVideo();
    }
  }
}
</script>

方法三：使用条件渲染

<template>
  <view>
    <video v-if="showVideo" :src="videoSrc" @ended="onVideoEnd"></video>
    <button @click="replayVideo">重新播放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '/static/video.mp4',
      showVideo: true
    }
  },
  methods: {
    replayVideo() {
      this.showVideo = false;
      this.$nextTick(() => {
        this.showVideo = true;
      });
    },
    onVideoEnd() {
      this.replayVideo();
    }
  }
}
</script>

推荐使用方法二，因为它能确保视频完全重置，包括播放状态和缓冲数据，效果最稳定。

回到顶部