페이지에서 모든 동영상이 완전히

Question

로드되었을 때 나는 이미지 대신 비디오를 받아들이는이 스크립트를 수정 한 자바 스크립트를 실행 동영상이 동기화되지 않습니다. 첫 번째 동영상은 다른 동영상보다 먼저 시작됩니다. 그것을 체크 아웃 :

http://amarsyla.com/sandbox/beforeafter/

HTML :

$(window).load(function() { 
    $('#container').beforeAfter(); 
}); 

물론, window.load이 일을하지 않습니다

<div id="container"> 
    <div> 
     <video alt="before" autoplay="true" loop="true" width="600" height="366"> 
      <source src="before.mp4" type="video/mp4;"> 
     </video> 
    </div> 
    <div> 
     <video alt="after" autoplay="true" loop="true" width="600" height="366"> 
      <source src="after.mp4" type="video/mp4;"> 
     </video> 
    </div> 
</div> 

를이 코드를 사용하여 플러그인을 초기화합니다. JavaScript 이벤트가 필요하거나 유사한 두 가지 비디오가 모두로드되고 서로 동시에 재생을 시작할 수있는 유사한 이벤트가 필요합니다. 동영상이 서로 완벽하게 동기화되기를 원합니다. 따라서 각 동영상이 동시에 시작되기 때문에 두 동영상이 모두로드 된 후 플러그인을 초기화하면 이것이 가능할 것이라고 생각했습니다. 나는 이것을 시도했다 :

var vid = document.getElementById("myVideo"); 
vid.oncanplaythrough = function() { 
    alert("Can play through video without stopping"); 
}; 

그것은 내가 예상했던대로 작동하지 않는다. 항상 발화하는 것은 아닙니다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

질문의 코드는 링크의 코드와 다르므로 실제로 실행중인 코드이므로 후자를 선택하겠습니다.

동영상이 재생되고 있어도 네트워크에서 더 많은 데이터를 기다려야하는 경우 몇 초 후에 동기화가 끊어지는 것 같습니다. 'oncanplaythrough'는 동영상이 일시 중지없이 계속 재생되도록 충분히 버퍼링되어 있다고 가정하는 데 충분할 것이라고 생각할 수도 있습니다. 항상 그렇지는 않습니다.

이론적으로 "canplaythrough"는 브라우저가 데이터를 재생하는 것보다 더 빨리 들어오는 것으로 생각할 때 발생합니다. "canplay"는 재생할 데이터가 충분할 때 발생합니다. 현재 시간. 하지만 크롬은 "캔 플레이"이후에 "canplaythrough"immediately을 발생 시키므로 믿을 수 없습니다. 다른 우수한 브라우저에서도 데이터 전송이 빠르게 시작된 다음 이벤트가 발생한 후 속도가 느려질 수 있습니다.

즉, 비디오에서 "대기중인"이벤트가 계속해서들 어와 다시 따라 잡을 때까지 일시 중지해야한다는 의미입니다. http://code.chirls.com/whiteknuckles/

그것은 아주 오래된 코드와 나의 최고의 작품입니다 :

다음은 시작 당신이 얻을 수있는 참고 자료로 사용할 수있는 예입니다. 나는 오늘 그것을 쓴다면 다르게 할 것이지만, 합리적으로 잘 작동하는 것 같다.