jQuery 액션 HTML 비디오의 특정 시점에 동작

Question

전체 비디오가 활성화되도록 기본 설정되었지만 기본적으로 비디오의 특정 부분을 반복해서 반복합니다.

마치 30 초짜리 비디오와 비슷하지만 10 초부터 시작하는 5 초짜리 비디오를 재생하도록 설정된 경우 10 초짜리를 비디오로 시작한 5 초간 재생 한 다음 다시 10 초로 되돌아 가서 재생합니다. 5 초 이상.

시커가 비디오의 특정 지점에있을 때 이벤트를 실행할 수 있도록 jquery로 비디오를 모니터하는 방법은 무엇입니까?

Answer 1

이 코드를 사용하면 동영상의 반복 가능한 두 부분을 설정할 수 있으므로 시작하기에 충분한 솔루션을 제공해야합니다. jQuery를 기반으로하지는 않지만 쉽게 모델을 변환 할 수 있습니다 (단지 손으로 직접 가져온 것이 아님)

<video id="video" controls="controls" muted preload="metadata" > 
    <source src="video.mp4" type="video/mp4" /> 
</video> 
<button onclick="repeat(1,3)">1-3</button> 
<button onclick="repeat(5,7)">5-7</button> 

<script> 
var funcLoop 
function repeat(startTime, endTime) { 
    var video = document.getElementById('video'); 
    video.removeEventListener('timeupdate', funcLoop, false); 
    video.addEventListener('timeupdate', funcLoop=function(){ 
     if (video.currentTime < startTime) { 
      video.currentTime = startTime; 
     } 
     if (video.currentTime >= endTime) { 
      video.currentTime = startTime; 
     }}, false); 
    video.play(); 
} 
</script>