Início / coding / Perguntas / 79490116
Accepted
DXB-DEV
Asked: 2025-03-07 00:54:55 +0800 CST

Como reproduzir um vídeo começando de um ponto específico e parando em um ponto específico (em segundos) e repetindo a reprodução sem interação do usuário?

  • 772

Quero reproduzir um vídeo (mp4) começando de um ponto específico (60 segundos), parar em um ponto específico (100 segundos) e repetir a reprodução sem interação do usuário.

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

Alguém pode sugerir uma maneira?

html

1 respostas

  1. Best Answer

    Você pode usar JavaScript e o evento timeupdate para fazer um loop contínuo de um vídeo entre 60s e 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>

    Como funciona:

    1. Reprodução automática e mudo: o vídeo inicia automaticamente e fica sem som.
    2. Seamless Looping: O evento timeupdate monitora continuamente o tempo de reprodução. Quando o vídeo atinge 100s, ele salta instantaneamente de volta para 60s sem qualquer atraso.
    3. Sem pausas ou recargas: o loop acontece suavemente, criando uma experiência de reprodução contínua.

    Reconhecimento:

    Esta abordagem foi inspirada por um comentário do usuário Offbeatmammal, que sugeriu usar JavaScript e HTML5 Media Events para controlar o tempo de reprodução dinamicamente. Eu expandi essa ideia fornecendo um exemplo funcional completo para looping contínuo

    • 2

relate perguntas