別の再生時にYouTubeのiframe埋め込みを埋め込みます

Question

ページに複数のYouTube iFrameが埋め込まれています。 1つの映画がすでに再生されていて、ユーザーが別の映画の再生を開始することを決めた場合、最初の映画の再生を停止して、一度に1つだけ再生することは可能ですか？

私は 'YouTube Player APIリファレンスfor iframe Embeds'のhttps://developers.google.com/youtube/iframe_api_referenceを見てきましたが、正直であれば分かりません。私の開発者のスキルは非常に限られています....明らかに。

哀れな私は私が行うために必要なすべてがで「= 1 & enablejsapi」を追加したと思った私は知っているが、これはモーメント（ただのiFrame）で私が持っているすべてです... http://jsfiddle.net/YGMUJ/

<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> 

動画URLの最後。

ご協力いただければ幸いです。
ありがとうございます。

Answer 1

iframeを使用する代わりに、実際にiFrame Player APIを使用したいと考えています。実際に埋め込んでおきたい動画の数に応じて、このJavaScriptをよりダイナミックにしたいかもしれませんが、この実際の例では十分に使い始めることができます。

私がここでやっていることは、2人のプレーヤーを初期化して、プレイヤーの状態が再生に変わったときに反対のビデオを一時停止することです。あなたがここ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のバージョンの高度なバージョンです。 JavaScriptでビデオを作成する必要はありません。たとえば、ビデオが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のソリューションは本当に近いですが、私が提案する1つの編集があります。あなたがそれらを一時停止する前に他のプレイヤーがプレーしていることを確認する必要があります。そうしないと、ページ上の最初の埋め込みを再生/一時停止し、プレビューサムネイルを削除して驚くべき副作用を作り出します。

<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>