자바 스크립트 유튜브 API -로드 플레이어

Question

나는 내 웹 사이트에 YouTube 동영상의 목록을 가지고 있고이 같은 각 목록 항목 모습입니다 : 사용자가이 비디오 항목, 패널 방울 중 하나를 클릭하면

<div class="video_item" id="<YouTubeVideoID>"> 
    // video thumbnail and information 
</div> 

아래 API를로드하고 패널의 슬라이드 액션 완료되면, 비디오 플레이어를 표시해야합니다 : 문제는

$(document).ready(function(e) { 
    $('.video_item').live('click', function() { 
     var vid_id = $(this).attr('id'); 
     if (vid_id) { 
      $("html").animate({ scrollTop: $('#main').offset().top-20 }, 1000, function() { 
       setTimeout(function() { 
        $('.video_drop_panel_wrap').slideDown('slow', function() { 

         var tag = document.createElement('script'); 
         tag.src = "http://www.youtube.com/iframe_api"; 
         var firstScriptTag = document.getElementsByTagName('script')[0]; 
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

         var player; 
         function onYouTubeIframeAPIReady() { 
          player = new YT.Player('youtube_player', { 
          height: '371', 
          width: '570', 
          videoId: vid_id, 
          events: { 
           'onReady': onPlayerReady 
          } 
          }); 
         } 

         function onPlayerReady(event) { 
          event.target.playVideo(); 
         } 
        }); 
       },1000); 
      }); 
     } 
    }); 
}); 

, 그것은 플레이어를 표시하지 않습니다를 내가받지 않습니다 내 JS 개발자 콘솔의 모든 오류. 필자는 API와 플레이어를 패널 아래로 슬라이드하지 않고 테스트했으며 작동합니다. 그것은 DOM 문제 또는 그 이외의 경우 나는 잘 모르겠습니다. 아무도 내가 잘못한 것을 발견 할 수 있다면, 나는 때리는 것을 고맙게 여길 것이다. 오.

Answer 1

onYouTubeIframeAPIReady()이 전체 범위에 없기 때문에 오류가 발생합니다.이 오류는 $('.video_drop_panel_wrap').slideDown('slow', function() {...}) 안에 만 존재합니다. API의 지연로드는 스코프 관점에서 <script> 태그 안에 배치하는 것과 동일하므로 전역 함수를 검색합니다.

코드를 리펙토링하여 onYouTubeIframeAPIReady()이로드되면로드 할 비디오에 대한 정보를 가리킬 수 있습니다. API가로드되면

은 대략 당신은 API 준비 호출 그것이 자신의 별도의 기능에서 유래 때문에 온있는 상황을 인식하지 못합니다한다 그래서

<script> 
     //Youtube api stuff 
     (function(){ 
      //Do Stuff 
      onYouTubeIframeAPIReady(); 
     })(); 
</script> 
<script> 
     $(document).ready(function(){'Your Stuff Here'}) 
</script> 

와 끝까지 .

원유 용액이 그것을 할 수 없을 경우 변수 전역에 생성 될 var 문을 사용하지 않고 정의 되었기 때문에

onYouTubeIframeAPIReady = function(){ 
    player = new YT.Player('youtube_player', { 
    height: '371', 
    width: '570', 
    videoId: vid_id, 
    events: { 
     'onReady': onPlayerReady 
    } 
    }); 
} 

에 var player 아래 줄의 코드를 변경할 수 있었다 스코프 체인에서 같은 이름의 변수를 찾습니다. onPlayerReady은 onYouTubeIframAPIReady이 생성 될 때 존재하므로 (로컬 범위) 동일한 처리가 필요하지 않습니다. 이 플러그인을 사용하는

Answer 2

시도 ...... https://code.google.com/p/jquery-ytiframetracker/