主页 / coding / 问题 / 79490116
Accepted
DXB-DEV
Asked: 2025-03-07 00:54:55 +0800 CST

如何从特定点开始播放视频并在特定点停止（以秒为单位）并循环播放而无需用户交互？

  • 772

我想从特定点（60 秒）开始播放视频（mp4），在特定点（100 秒）停止，并且循环播放而无需用户交互。

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

有人能建议一个办法吗？

html

1 个回答

  1. Best Answer

    您可以使用 JavaScript 和 timeupdate 事件在 60 秒和 100 秒之间无缝循环视频：

    <!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>

    工作原理：

    1. 自动播放和静音：视频自动开始并静音。
    2. 无缝循环：timeupdate事件持续监控播放时间，当视频播放到100秒时，立即跳回到60秒，无任何延迟。
    3. 无需暂停或重新加载：循环流畅，创造出连续播放的体验。

    致谢：

    这种方法的灵感来自用户 Offbeatmammal 的评论，他建议使用 JavaScript 和 HTML5 媒体事件来动态控制播放时间。我通过提供一个完整的无缝循环工作示例来扩展这个想法

    • 2

相关问题