클릭 이벤트가 발생했을 때 YouTube 동영상 제작에 대한 조언

Question

YouTube 비디오에로드 한 테스트 코드를 설정 한 다음 비디오를 중단하려는 링크의 jquery 클릭 이벤트를 설정했습니다. 링크를 클릭하면 오류가 발생합니다 : 잡히지 않은 TypeError : 객체 [객체 객체]에 'stopVideo'메서드가 없습니다.

누구나 내가 잘못 생각할 수있는 곳을 제안 할 수 있습니까?

<div id="container"> 
    <a href="#">This is the link</a> 

    <br /><br /> 
    <br /><br /> 

    <div id="player"></div> 
</div> 


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

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubePlayerAPIReady() { 
      player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'u1zgFlCw8Aw' 
      }); 
     } 

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

     $(document).ready(function() { 
      $('a').click(function(e) { 
       player.stopVideo(); 
       e.preventDefault(); 
      }); 
     }); 
</script> 

Answer 1

귀하의 코드 스 니펫은 fiddle에서 의도 한대로 작동합니다. 또한 구현시 제한 사항으로 인해 file:/// 프로토콜에서 YouTube 프레임 API가 작동하지 않습니다.

나는 이전에 YouTube iframe API: how do I control a iframe player that's already in the HTML?에서 사용할 수있는 YouTube API의 맞춤 구현을 만들었습니다. 나는 file:/// 프로토콜에서 stopVideo 메서드를 성공적으로 실행했습니다.

코드를 온라인으로 실행하는 경우 나는 다른 원인을 생각할 수 있습니다. 플레이어가 준비되기 전에 링크를 클릭하려고합니다. 문제를 해결하려면 함수를 병합하십시오.

function onPlayerReady(event) { 
     event.target.playVideo(); 
     $('a').click(function(e) { //<--- Binds event to ALL anchors! Are you sure? 
      player.stopVideo(); 
      e.preventDefault(); 
     }); 
    });