微信小程序视频循环播放前 3 秒

一、需求说明

视频列表中第一个视频，自动循环播放前 3 秒（如淘宝首页中视频模块）

效果如下：

二、实现 Demo

<video
  id="productVideo"
  src="https://qiuzi-resource.oss-cn-shenzhen.aliyuncs.com/video.MP4"
  autoplay
  loop
  muted
  controls="{
     
     { false }}"
  object-fit="cover"
  style="width: 270rpx; height: 360rpx;"
  bindtimeupdate="bindVideotimeupdate"
/>

bindVideotimeupdate(event) {
    
    
  const id = event.currentTarget.id
  const currentTime = Number.parseInt(event.detail.currentTime)
  const videoContext = wx.createVideoContext(id)

  // 循环播放前 3 秒
  if (currentTime === 3) {
    
    
    videoContext.seek(0)
  }
}