유튜브 플레이어의 비디오 재생하기

Question

나는이 비디오 페이지를 유튜브에서 가져온다. 유튜브의 비디오는 태그가 붙은 것을 목적으로한다. 사람들이 각 비디오를 클릭 할 때마다 캡쳐해야한다. 웹에서 살펴 봤지만이 동영상은 메인 도메인 외부의 iframe에 있기 때문에 클릭과 같이 동영상을 내부에서 잡을 수 없습니다.

사이트에서 아무 것도 변경하지 않고 재생 버튼을 클릭 할 수있는 방법이 있습니까? 그냥 JS에서.

감사합니다. 미리 감사드립니다.

Answer 1

당신은 사용하여 일부 이벤트에게 iframe 내을 캡처 할 수있는 유튜브의 js API

이것은 당신이해야 할 것입니다 :

1). 페이지

<script src="http://www.youtube.com/player_api"></script> 

2)에 Player API를로드합니다. ...

<iframe id="myIframe" src="http://www.youtube.com/embed/opj24KnzrWo?enablejsapi=1&autoplay=0" width="420" height="280" frameborder="0"></iframe> 

같은 후행 매개 변수 (enablejsapi)로 iframe에 jsapi 사용도 통지 우리는 iframe에 ID을 추가했다.

3). 3 가지 기능 생성 :

a). onPlayerReady :

여기에 비디오가로드되어 재생할 준비가되었을 때이를 감지 할 수있는 곳이 있습니다. 여기에서 실제로 비디오 등을 시작할 수 있습니다.

function onPlayerReady(event) { 
    // video is ready, do something 
    event.target.playVideo(); 
} 

b). onPlayerStateChange : 여기

는 이벤트가이 트리거되는 것을 감지 할 수있는 곳입니다 :

function onPlayerStateChange(event) { 
    console.log(event.data); // event triggered 
    // e.g. end of video 
    if (event.data === 0) { 
     // end of video: do something here 
    } 
} 

당신은 click플레이 또는 일시 정지, 이벤트가 트리거됩니다. 그럼 당신이 각 이벤트의 반환 값의 목록입니다 당신이 추적을 등

이벤트를 밀어 포함하여 수행 할 작업을 결정할 수 있습니다 :

-1 – unstarted 
0 – ended 
1 – playing 
2 – paused 
3 – buffering 
5 – video cued 

documentation에에 참조 자세한 내용은 이벤트

c)를 참조하십시오.

function onYouTubePlayerAPIReady() { 
    var id = document.getElementById("myIframe").getAttribute("id"); 
    var player = new YT.Player(id, { 
     events: { 
      onReady: onPlayerReady, 
      onStateChange: onPlayerStateChange 
     } 
    }); 
} // youtube API ready 

이 JSFIDDLE