Youtube - 동영상로드시 확인

Question

AJAX를 사용하여 YouTube 동영상의 동영상 ID를 동적으로 변경하고 있습니다. 내 AJAX 호출은 거의 즉시 발생하지만 YouTube에서 내 요청을 실행하여 다음 동영상의 콘텐츠를 가져 오는 것이 지연되는 것으로 나타났습니다. 결과적으로 Youtube의 응답을 기다리고 있으므로 YouTube 플레이어를 숨기고 싶습니다.

내 질문은 내 유튜브 비디오가 자바 스크립트를 통해로드를 완료했을 때 어떻게 감지합니까? -

<iframe id="ytplayer" class="hide" type="text/html" width="840" height="470" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen>

EDIT 내 AJAX 작동 방법 : 사용자가 내 웹 사이트의 비디오 버튼을 클릭하면

을 모달가 나타납니다. 내 AJAX는 모달이로드 될 때 데이터베이스에서 비디오 ID를 가져오고이 비디오 ID를 포함하도록 #ytplayer의 src 속성을 수정합니다. 그런 다음 모달이 페이지에 렌더링되지만 Youtube의 응답을 기다리고 있습니다.

Answer 1

하지 당신이 그것을로드하지만, AJAX는 네이티브 콜백 가지고 방법을 잘 : 당신이 iframe API를 사용하는 경우

$.ajax({ 
    url: 'myYouTubeData.html', 
    success: function(){ 
    alert('success'); 
    }, 
    error: function(){ 
    alert('failure'); 
    } 
}); 

Answer 2

, 당신은 아마도 player.getPlayerState():Number를 사용하거나이 같은에서 이벤트 API를 사용할 수 있습니다 페이지. 아마도 onStateChange을 사용하고 YT.PlayerState.ENDED을 청취하여 CSS로 플레이어를 숨길 수 있습니다. YT.PlayerState.PLAYING 또는 YT.PlayerState.BUFFERING과 같은 다른 상태로 전환하면 다시 표시 할 수 있습니다.

Answer 3

내가하고있는 일은 비디오가 전환 될 때 비디오가로드 될 때 비디오와 배경을 혼합하는 것입니다.

// set up iframe player, use global scope so YT api can talk 
    window.player; 
    window.onYouTubeIframeAPIReady = function() { 
     player = new YT.Player('tubular-player', { 
      width: options.width, 
      height: Math.ceil(options.width/options.ratio), 
      videoId: options.videoId, 
      playerVars: { 
       controls: 0, 
       showinfo: 0, 
       modestbranding: 1, 
       wmode: 'transparent' 
      }, 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 

    window.onPlayerReady = function (e) { 
     resize(); 
     if (options.mute) 
      e.target.mute(); 
     e.target.seekTo(options.start); 
     e.target.playVideo(); 
    } 

    window.onPlayerStateChange = function (state) { 
     if (state.data === 0 && options.repeat) { // video ended and repeat option is set true 
      player.seekTo(options.start); // restart 
     } 
     if (state.data == YT.PlayerState.PLAYING) { // video ended and repeat option is set true 
      $(".initial-video-image").fadeTo(1000, 0); 
     } 
    }