다른 시간에 div를 보여주기 위해 JS가있는 YouTube 클립과 함께 타이머가 있습니다.

Question

페이지에 YouTube 클립을로드하고 클립과 함께 youtube와 같이 작동하는 맨 위 (HTML) 레이어를 추가하고 싶습니다. 소유하고있는 주석 기능.

글 머리 기호에 : - 사용자가 YT 클립을 볼 수 있습니다 (맞춤식 플레이어에있는 것 같습니다). - 클립의 현재 시간에 따라 클립 상단에 레이어에 정보를로드해야합니다. 그래서

: 예를 들어 , 다시 등 등

모든 아이디어 방법에 0.37 텍스트로 0.30에서 0.30 텍스트가 0.05에서 클립 의 상단에 텍스트의 조각을 볼 0.00에서 0.05 이걸 접근 해? Youtube의 Player API에 기능이 있음을 깨닫습니다 getCurrentTime 하지만 어떻게하면 클립 상단에있는 div 레이어의 클립과 함께 "재생할"JS 조각을 작성합니까?

Answer 1

이 방법은 실제로 yt API에서 getCurrentTime 메서드로 수행합니다. 구체적으로는 setInterval을 사용하여 반복 함수로 호출하는 것입니다.

당신은에서와 시간, 뭔가 같은과 함께, 당신이 제시하고자하는 오버레이의 배열을 유지해야합니다 다음

var overlays = [ 
    {text:"Some text",from:1,to:6}, 
    {text:"Some other text",from:8,to:14}]; 

, 당신은 영화를 처리하는 기능의 몇 가지가 필요합니다 재생 및 중지 (또는 일시 중지).

var watchId; 
function startWatch(){ 
    watchId = setInterval(function(){ 
     showOrHideOverlay(ytplayer.getCurrentTime()); 
    },1000) 
} 

function stopWatch(){ 
    clearTimeout(watchId); 
} 

당신은 그 변수 ytplayer을 사용하고 jsapi documentation에 따라이 다음과 같은 코드를 사용하여 잡고 할 수 있습니다 알 수 있습니다 :이 우리를 이끌고,이 필자의

var ytplayer ; 
function onYouTubePlayerReady(playerId) {  
    ytplayer = document.getElementById("myytplayer"); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); 
} 

공지 사항 이벤트 리스너를 부착을 방법이 그래서 퍼즐의 마지막 조각이 실제로 OC로 설정 필자는 "틱"을 처리하는

function onytplayerStateChange(newState) {  
    if(newState == 1){ // playing 
     startWatch() 
    } 
    else if(newState == 0 || newState == 2){ //ended or paused 
     stopWatch(); 
    }    
} 

을 변경하는 영화 상태를 처리하는 매초마다. 이 방법 showOrHideOverlay 보이는 같은 :

function showOrHideOverlay(time){ 
    // find overlays which should be visible at "time" 
    var shownOverlays = false; 
    for(var i=0;i<overlays.length;i++){ 
     if(overlays[i].from < time && overlays[i].to > time){ 
      $('#overlay').text(overlays[i].text); 
      shownOverlays = true; 
     }   
    } 
    if(!shownOverlays) 
     $('#overlay').text(""); 

} 

마지막으로, 라이브 예 : http://jsfiddle.net/zTZjU/ (클립에 그냥 언론 플레이)이 바이올린

Answer 2

확인 : http://jsfiddle.net/rEeJS/
내가 wmode="transparent"을 추가 오버레이가 크롬에 표시 할 수 있도록 .