[SOLVED] How to play a video starting from a particular point and stop at a particular point(in seconds) and loop the playing without user interaction?

How to play a video starting from a particular point and stop at a particular point(in seconds) and loop the playing without user interaction?

I want to play a video (mp4) starting from a particular point(60 seconds), stop at a particular point(100 seconds), and loop the playing without user interaction.

<video autoplay muted loop>
<source src="../images/myvideo.mp4#t=60,100" type="video/mp4">
</video>

Can anyone suggest a way?

Solution

You can use JavaScript and the timeupdate event to seamlessly loop a video between 60s and 100s:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seamless Loop Video</title>
</head>

<body>

  <video id="myVideo" autoplay muted>
        <source src="../images/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>

</html>

<script>
  const video = document.getElementById("myVideo");

  // Start video from 60s
  video.currentTime = 60;

  video.addEventListener("timeupdate", function() {
    if (video.currentTime >= 100) {
      video.currentTime = 60; // Instantly jump back to 60s
    }
  });

  video.play();
</script>

How It Works:

Autoplay & Mute: The video starts automatically and is muted.
Seamless Looping: The timeupdate event continuously monitors the playback time. When the video reaches 100s, it instantly jumps back to 60s without any delay.
No Pauses or Reloads: The loop happens smoothly, creating a continuous playback experience.

Acknowledgment:

This approach was inspired by a comment from user Offbeatmammal, who suggested using JavaScript and HTML5 Media Events to control playback time dynamically. I expanded on this idea by providing a complete working example for seamless looping