진행률 막대가있는 웹 페이지에 비디오를로드하는 가장 좋은 방법

Question

html5 css와 javascript를 사용하는 웹 사이트에서 약 30 초 정도의 비디오를 재생하고 싶습니다. 내가 원하는 것은 재생하기 전에 비디오가로드되었는지 확인하여 중단없이 재생되도록하는 것입니다.

빠르고 간단한 솔루션.

Answer 1

원하는 것을 얻기 위해서는 자바 스크립트를 구현해야합니다.

"버퍼링 된"이벤트를 바인딩 할 수 있지만 (Chrome에서는 적어도)이 이벤트는 마지막 "버퍼링 된"이벤트를 호출하지 않는다는 점을 제외하고는 정상적으로 작동합니다 (예 : 90 % ... 94 %를 감지 함). .98 % ...하지만 100 %로 전화하지는 않음).

참고 : jQuery를 최신 버전이 해결하기 위해 대신 .attr()

의 .prop()를 사용해야합니다 내가 사용했습니다에서는 setInterval() 버퍼를 확인 $ HTML5 비디오가 <video> 요소마다 500ms로 (:

var videoDuration = $html5Video.attr('duration'); 

var updateProgressBar = function(){ 
    if ($html5Video.attr('readyState')) { 
     var buffered = $html5Video.attr("buffered").end(0); 
     var percent = 100 * buffered/videoDuration; 

     //Your code here 

     //If finished buffering buffering quit calling it 
     if (buffered >= videoDuration) { 
       clearInterval(this.watchBuffer); 
     } 
    } 
}; 
var watchBuffer = setInterval(updateProgressBar, 500);