여러 YouTube 동영상 동기화

Question

한 번에 여러 YouTube를 재생하는 가장 좋은 방법은 무엇입니까? 밀리 초 단위로 동기화되어 버퍼링 문제 나 다른 길이의 광고에 영향을받지 않기를 바랍니다.

업데이트 1 : 나는 다음과 같은 질문에 대한 답변을 얻을 것이다 경우 내 질문에 충분히 대답 할 것이라고 생각

: 당신이 비디오이면 유튜브의 자바 스크립트 API를 사용하여 검출 할 수있는 방법

을 재생할 수 있음 (동영상 재생/광고가 재생되지 않을만큼 충분히 버퍼링 됨/동영상이 다른 이유로 중지되지 않음)?

갱신 2 :

유튜브 동기화의 기본 아이디어는 SwigView에 의해 수행되었습니다. 누락 된 유일한 이유는 SwigView가 훌륭한 작업을 수행하지 않은 비디오를 더 정확하게 동기화하기 위해서입니다.

현재 API에서 가능하다는 의심이 들기 시작했으며 대안적인 접근 방법을 찾고 있습니다.

Answer 1

두 명의 플레이어 사이의 시간차를 측정하고 조정하여 두 개의 YouTube iFrame API 플레이어를 0.2 초 이내로 동기화 할 수 있습니다. 예를 들어 한 플레이어의 재생 속도를 두 배 또는 반으로하고 X/2 밀리 초 후에 정상 속도로 다시 설정하여 X 밀리 초의 시간 차이에 대한 조정을 매우 정확하게 수행 할 수 있습니다. 일반 API 레퍼토리에서 사용자 상호 작용 (중지, 재생, 일시 중지)을위한 헬퍼를 추가 할 수 있습니다. 그들은 또한 선수들을 일시 정지시키기 때문에 광고를 덮는다.

script.js

// the players 
var player1; 
var player2; 

// the rules 
var syncThreshold=0.2; // seconds, threshold for an acceptable time difference to prevent non-stop syncing 
var jumpThreshold=2; // seconds, threshold for a time difference that should be corrected by a rough jump 
var jumpDeadTime=500; // milliseconds, a dead time in which we don't sync after a jump 

// timeouts and intervals 
var timeSyncInterval; 
var syncActionTimeout=undefined; 

// The YouTube API calls this once it's ready 
function onYouTubeIframeAPIReady() { 
    player1 = new YT.Player('somediv1', { 
    videoId: 'zkv-_LqTeQA', 
    events: { 
     onReady: syncTime, 
     onStateChange: syncStateChange 
    } 
    }); 
    player2 = new YT.Player('somediv2', { 
    videoId: 'zkv-_LqTeQA' 
    }); 
} 

// the syncing magic 
function syncTime(){ 
    // making sure the syncing interval has not been set already for some reason 
    clearInterval(timeSyncInterval); 
    // setting a 1s interval in which we check it the players are in sync and correct in necessary 
    timeSyncInterval = setInterval(function() { 
    // if the timeout is already set, we are already trying to sync the players, so we don't have to do it again 
    if(syncActionTimeout==undefined){ 
     // measure the time difference and calculate the duration of the sync-action 
     var time1=player1.getCurrentTime(); 
     var time2=player2.getCurrentTime(); 
     var timeDifference=time2-time1; 
     var timeDifferenceAmount=Math.abs(timeDifference); 
     var syncActionDuration=1000*timeDifferenceAmount/2; 

     if(timeDifferenceAmount>jumpThreshold){ 
     // the players are too far apart, we have to jump 
     console.log("Players are "+timeDifferenceAmount+" apart, Jumping."); 
     player2.seekTo(player1.getCurrentTime()); 
     // we give the player a short moment to start the playback after the jump 
     syncActionTimeout=setTimeout(function() { 
      syncActionTimeout=undefined; 
     },jumpDeadTime); 
     }else if(timeDifference>syncThreshold){ 
     // player 2 is a bit ahead of player 1, slowing player 2 down 
     console.log("Player 2 is "+timeDifference+"s ahead of player 1. Syncing."); 
     player2.setPlaybackRate(0.5); 
     // setting a timeout that fires precisely when both players are sync 
     syncActionTimeout=setTimeout(function() { 
      // the players should be sync now, so we can go back to normal speed 
      player2.setPlaybackRate(1); 
      syncActionTimeout=undefined; 
     },syncActionDuration); 
     }else if(timeDifference<-syncThreshold){ 
     console.log("Player 1 is "+(-timeDifference)+"s ahead of player 2. Syncing."); 
     // player 1 is bit ahead of player 2, slowing player 2 down 
     player2.setPlaybackRate(2); 
     // setting a timeout that fires precisely when both players are sync 
     syncActionTimeout=setTimeout(function() { 
      // the players should be sync now, so we can go back to normal speed 
      player2.setPlaybackRate(1); 
      // undefining the timeout to indicate that we're done syncing 
      syncActionTimeout=undefined; 
     },syncActionDuration); 
     } 
    } 
    },1000); 
} 

// a little helper to deal with the user 
function syncStateChange(e){ 
    if(e.data==YT.PlayerState.PLAYING){ 
    player2.seekTo(player1.getCurrentTime()); 
    player2.playVideo(); 
    }else if(e.data==YT.PlayerState.PAUSED){ 
    player2.seekTo(player1.getCurrentTime()); 
    player2.pauseVideo(); 
    } 
} 

index.html을

<!DOCTYPE html> 
<html> 
<head> 
     <title>Sync Two Youtube Videos</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
     <!-- CDN --> 
     <script type="text/javascript" src="//www.google.com/jsapi"></script> 
     <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script> 

    <script src="https://www.youtube.com/iframe_api"></script> 
    <!-- HOSTED --> 
     <script src="script.js"></script> 
</head> 
<body> 
    <div id="somediv1"></div> 
    <div id="somediv2"></div> 
</body> 
</html>