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?
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?
Share Improve this question asked Mar 6 at 16:54 DXB-DEVDXB-DEV 5991 gold badge8 silver badges19 bronze badges 2 |1 Answer
Reset to default 2You 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
timeupdateevent that resets the current time back to 60s when it's > 100s. – Offbeatmammal Commented Mar 7 at 7:29