admin管理员组

文章数量:1406063

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?

  • html
  • video
  • video-streaming
  • html5-video
Share Improve this question asked Mar 6 at 16:54 DXB-DEVDXB-DEV 5991 gold badge8 silver badges19 bronze badges 2
  • I hope there is no solution for this. – DXB-DEV Commented Mar 7 at 6:56
  • 2 Use Javascript and HTML5 MediaEvents -w3./2010/05/video/mediaevents.html - when the video initially loads set the time to 60s, and then have an event handler on the timeupdate event that resets the current time back to 60s when it's > 100s. – Offbeatmammal Commented Mar 7 at 7:29
Add a comment  | 

1 Answer 1

Reset to default 2

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:

  1. Autoplay & Mute: The video starts automatically and is muted.
  2. Seamless Looping: The timeupdate event continuously monitors the playback time. When the video reaches 100s, it instantly jumps back to 60s without any delay.
  3. 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

本文标签：

版权声明：本文标题：html - How to play a video starting from a particular point and stop at a particular point(in seconds) and loop the playing with 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744961053a2634656.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。