jQuery视频ended事件实现类Instagram故事循环，视频无法重置播放时间

Hey there! Let's get your Instagram-style story video slider working perfectly—right now the main issues are videos not resetting to the start when switched and potential duplicate event listeners causing weird behavior. Let's break down the fixes step by step.

The Root Problems #

1. You're binding the ended event every time sliderResponse runs, which creates duplicate listeners. This can cause unexpected jumps or multiple triggers when a video finishes.
2. When switching videos, you're not pausing and resetting the previously playing video (so it just sits paused in the background instead of being reset to start).

Updated Working Code #

Here's the revised JavaScript with fixes, plus comments explaining the key changes:

$(document).ready(function() {
  var triggers = $('div.bar div.item');
  var videos = $('video');
  var lastElem = triggers.length - 1;
  var target;

  // Initialize first video and active trigger
  triggers.first().addClass('active');
  videos.hide().first().show();
  const initialVideo = videos.first().get(0);
  initialVideo.currentTime = 0;
  initialVideo.play();

  // Bind ended event ONCE to all videos (avoids duplicate listeners!)
  videos.on('ended', function() {
    target = $('div.bar div.active').index();
    // Loop back to start if we're at the last video
    target = target === lastElem ? 0 : target + 1;
    sliderResponse(target);
  });

  function sliderResponse(target) {
    // Pause and reset ALL videos to prevent background playback/mid-pause states
    videos.each(function() {
      this.pause();
      this.currentTime = 0;
    });

    // Show target video and update active progress bar item
    videos.hide().eq(target).show();
    triggers.removeClass('active').eq(target).addClass('active');

    // Play the target video from the very start
    const currentVideo = videos.eq(target).get(0);
    currentVideo.currentTime = 0;
    currentVideo.play();
  }

  // Handle progress bar clicks to jump to specific video
  triggers.click(function() {
    if (!$(this).hasClass('active')) {
      target = $(this).index();
      sliderResponse(target);
    }
  });

  // Handle video clicks to skip to next story
  $('video').click(function() {
    target = $('div.bar div.active').index();
    target = target === lastElem ? 0 : target + 1;
    sliderResponse(target);
  });
});

Key Fixes Explained #

• Single ended Event Binding: We bind the video end event once during initialization instead of every switch. This eliminates duplicate listeners that caused erratic behavior.
• Global Video Reset on Switch: The each() loop ensures every video is paused and reset to the start when switching—no more background videos stuck mid-play or paused.
• Explicit Start Before Play: We set currentTime = 0 right before calling play() on the target video, guaranteeing it always starts from the beginning.
• Clean Initialization: The first video follows the same reset-and-play logic as subsequent switches, keeping behavior consistent.

This setup will give you the smooth, loopable Instagram-style story experience you want: videos reset to start every time they're shown, loop back to the first when the last finishes, and all click/end triggers work reliably.

内容的提问来源于stack exchange，提问作者user12154304