다른 YouTube를 재생할 때 YouTube iframe 삽입을 일시 중지

Question

페이지에 여러 개의 YouTube iFrame이 삽입되어 있습니다. 영화 중 하나가 이미 재생 중이며 사용자가 다른 영화를 시작하기로 결정한 경우 첫 번째 영화 재생을 중지하여 한 번에 하나만 재생되도록 할 수 있습니까?

'YouTube 플레이어 API 참조 (iframe 포함)'https://developers.google.com/youtube/iframe_api_reference을 살펴 봤지만 솔직히 이해할 수 없습니다. 내 개발자 기술은 매우 제한되어 있습니다 .... 명확하게.

<iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe> 
<iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe> 

내가 할 필요가 모든 생각 http://jsfiddle.net/YGMUJ/가에 추가 '&하려면 enablejsapi = 1'입니다 ...

지지리 나는 알고있다, 그러나 이것은 내가 순간 (단지 인 iFrame)에서 모두이다 동영상 URL의 끝.

도움을 주시면 감사하겠습니다.
미리 감사드립니다.

Answer 1

iframe을 사용하는 대신 실제로 iFrame Player API를 사용하려고합니다. 실제로 포함시키고 자하는 동영상의 수에 따라이 자바 스크립트를보다 역동적으로 만들고 싶을 수도 있지만이 작업 예제는 시작하기에 충분할 것입니다.

기본적으로 내가 여기서하고있는 일은 두 플레이어를 초기화하고 플레이어 상태가 재생으로 바뀌면 반대 동영상을 일시 중지하는 것입니다.

당신은 http://jsfiddle.net/mattkoskela/Whxjx/

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

var player; 
function onYouTubeIframeAPIReady() { 
    player1 = new YT.Player('player1', { 
     height: '293', 
     width: '520', 
     videoId: 'zXV8GMSc5Vg', 
     events: { 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
    player2 = new YT.Player('player2', { 
     height: '293', 
     width: '520', 
     videoId: 'LTy0TzA_4DQ', 
     events: { 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
     stopVideo(event.target.a.id); 
    } 
} 

function stopVideo(player_id) { 
    if (player_id == "player1") { 
     player2.stopVideo(); 
    } else if (player_id == "player2") { 
     player1.stopVideo(); 
    } 
} 

Answer 2

에서 다음 코드를 사용하여 재생할 수있는 것은 여기 @Matt Koskela의 버전의 고급 버전입니다. 자바 스크립트로 동영상을 만들 필요는 없습니다. 예를 들어 동영상이 PHP 측에서 생성 된 경우 (Wordpress를 생각해보십시오) 작동합니다.

JsFiddle demo here.

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

    function onYouTubeIframeAPIReady() { 
     var $ = jQuery; 
     var players = []; 
     $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each(function (k, v) { 
      if (!this.id) { this.id='embeddedvideoiframe' + k } 
      players.push(new YT.Player(this.id, { 
       events: { 
        'onStateChange': function(event) { 
         if (event.data == YT.PlayerState.PLAYING) { 
          $.each(players, function(k, v) { 
           if (this.getIframe().id != event.target.getIframe().id) { 
            this.pauseVideo(); 
           } 
          }); 
         } 
        } 
       } 
      })) 
     }); 
    } 
</script> 

One: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe> 
<br/> 
Two: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe> 

편집 : 점검 비디오 축소판으로 밖으로 Jennie Sadler's fine-tuned version below을 시작합니다.

Answer 3

vbence의 솔루션은 정말 비슷하지만 제가 제안 할 편집이 하나 있습니다. 다른 플레이어가 일시 중지하기 전에 다른 플레이어가 재생 중인지 확인해야합니다. 그렇지 않으면 페이지의 첫 번째 삽입을 재생하면 페이지에있는 모든 다른 삽입을 재생/일시 중지하고 미리보기 이미지를 삭제하고 깜짝 놀랄만 한 부작용을 만듭니다.

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

function onYouTubeIframeAPIReady() { 
    var $ = jQuery; 
    var players = []; 
    $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each(function (k, v) { 
     if (!this.id) { this.id='embeddedvideoiframe' + k } 
     players.push(new YT.Player(this.id, { 
      events: { 
       'onStateChange': function(event) { 
        if (event.data == YT.PlayerState.PLAYING) { 
         $.each(players, function(k, v) { 
          if (this.getPlayerState() == YT.PlayerState.PLAYING # checks for only players that are playing 
            && this.getIframe().id != event.target.getIframe().id) { 
           this.pauseVideo(); 
          } 
         }); 
        } 
       } 
      } 
     })) 
    }); 
} 
</script> 

One: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/zXV8GMSc5Vg?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe> 
<br/> 
Two: 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="160" height="100" src="http://www.youtube.com/embed/LTy0TzA_4DQ?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>