2012-07-25 3 views
2

사용자가 사이드 패널에서 작업을 수행하고 비디오에서 작업이 이루어지는 대화 형 비디오 (게임 종류)를 프로그래밍하고 있습니다.비디오 내 원활한 루프가있는 HTML5 비디오

일부인 경우 비디오는 패널에서 사용자 작업을 기다리고 있으므로 사용자가 작업을 시작할 때까지 반복해야합니다.

그래서 15 초가 지나면 사용자가 조치를 취하지 않는 한 11 초가 지나면 비디오는 완벽한 루프로 디자인됩니다.

내 루프가 작동하지만 문제는 원활하지 않다는 것입니다. 15 초에 1 초 동안 정지 한 다음 11 초에 다시 시작합니다. 원활하게 작동 할 수있는 방법이 있습니까?

VideoJS를 사용하고 있습니다.

var video_decor = _V_("video_decor"); 
video_decor.addEvent("timeupdate", function(){ 
    var whereYouAt = video_decor.currentTime(); 
    console.log(whereYouAt); 
    if(whereYouAt > 15){ 
     video_decor.currentTime(11); 
    } 
}); 

답변

3

원활한 루프를 수행하는 가장 쉬운 방법은 전체 길이의 비디오를 사용하고 '종료'이벤트가 처음으로 되돌아 가서 기다리는 것입니다 : 여기 내 코드입니다. 그건 꽤 매끄러운 경향이 있습니다. 그래서 그것이 가능하면 어떻게하면 좋을지도 모릅니다.

비디오의 하위 섹션을 가져 와서 반복하는 것은 어렵습니다. 브라우저가 매 밀리 초의 'timeupdate'이벤트를 트리거하지 않기 때문에 어렵습니다. 그렇게하는 것은 실제로 비효율적입니다. 대신 15 초 (Chrome/Safari) 또는 250 (Firefox) 밀리 초마다 timeupdate를 트리거하므로 오류가 발생합니다. 더 작은 간격으로 자신의 타이머 (setInterval)를 만들어 수동으로 시간을 확인할 수는 있지만 브라우저에 부담을 줄 수 있습니다.