我可以使用JavaScript的currentTime创建可中断的循环吗？

Question

我正在尝试创建一个视频循环，当我单击某个按钮中断时，该循环会结束视频

 function stopIt() { document.getElementById('stopIt').classList.add('stop'); } function loopy() { var vid = document.getElementById('front-video'); if (vid.currentTime > 1) { vid.currentTime = 0; if (document.getElementById('stopIt').classList.contains('stop')) { break; } } } 

 <video class="d-none d-lg-block" id="front-video" autoplay onTimeUpdate="loopy()"> <source src="video/front-video.mp4" type="video/mp4"> </video> <div class="col-12 front-box py-3 pl-4" id="stopIt" onClick="stopIt()"></div> 

我有一个ID为stopIt ，但实际上视频不会返回到开头，当我擦除第二个if时，它stopIt 。

任何想法，谢谢！

Answer 1

我不确定我是否正确理解您，但我认为您想这样做：

function loopy() {
  if (!document.getElementById('stopIt').classList.contains('stop')) {
    var vid = document.getElementById('front-video');
    if (vid.currentTime > 1) vid.currentTime = 0;
  }
}

Answer 2

如果要求从媒体播放的特定开始时间到媒体播放的特定结束时间循环播放，则可以将HTMLMediaElement的初始src设置为URL，后跟媒体片段标识符。

媒体元素将在媒体片段标识符的结束时间暂停。 可以使用pause时媒体元素到达媒体片段识别符，其中的结束时间事件，该事件被分派.load()然后.play()可以被调用以循环的媒体播放。

click button元素时，从button元素中删除pause事件处理程序，将.currentTime存储在变量中，从媒体元素的src中删除媒体片段标识符，在媒体元素上调用.load() ，将.currentTime设置为存储的.currentTime ，然后调用.play() 。

 const video = document.querySelector('video'); const button = document.querySelector('button'); let [from, to] = [0, 1]; let loop = true; let currentTime = 0; const src = "http://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm"; const handlePause = e => { if (loop) { video.load(); video.play(); } } const stopLoop = e => { if (loop) { loop = !loop; video.removeEventListener('pause', handlePause); currentTime = video.currentTime; video.src = video.src.replace(/#.+$/, ''); video.load(); video.currentTime = currentTime; video.play(); } } button.addEventListener('click', stopLoop) video.addEventListener('pause', handlePause); video.src = `${src}#t=${from},${to}` 

 <button>stop loop</button> <video src="" muted="false" controls autoplay>