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时才开始。

任何想法，谢谢！

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

如果要求是从一个特定的循环开始时间在媒体播放在媒体特定的结束时间重放可以设置初始src的{{1}}的URL后跟一个媒体片段标识符

media元素将在媒体片段标识符的结束时间暂停。可以使用HTMLMediaElement事件，这是当一个媒体元素到达媒体片段标识符，其中pause，则.load()可以被调用以循环的媒体播放。

目前.play()为click元件，删除button从pause元素事件处理程序，存储button在一个变量中，去掉介质从片段标识符的.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}`

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

2 个答案: