Wstrzymaj osadzanie elementu iframe YouTube podczas odtwarzania innego

Question

Mam wiele osadzonych na stronie elementów serwisu iFrames YouTube. Jeśli któryś z filmów jest już odtwarzany, a użytkownik decyduje się rozpocząć odtwarzanie innego filmu, czy można zatrzymać odtwarzanie pierwszego filmu, aby gra była odtwarzana tylko raz?

Zajrzałem do "Dokumentu API odtwarzacza YouTube dla elementów iframe" https://developers.google.com/youtube/iframe_api_reference, ale jeśli jestem szczery, po prostu tego nie rozumiem. Moje umiejętności programistyczne są bardzo ograniczone ... wyraźnie.

Pitiful wiem, ale to wszystko, co mam w tej chwili (tylko IFRAMES) ... 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> 

Myślałem, wszystko, co potrzebne do zrobienia było dodać '& enablejsapi = 1' u koniec adresów URL filmów.

Każda pomoc będzie mile widziana.
Z góry dziękuję.

Answer 1

Zamiast używać ramek iframe, należy użyć interfejsu API odtwarzacza iFrame. W zależności od tego, ile filmów faktycznie chcesz umieścić, możesz uczynić ten javascript bardziej dynamicznym, ale ten przykład pracy powinien dać ci wystarczająco dużo, aby zacząć.

zasadzie to, co robię tutaj inicjuje dwóch graczy, a zatrzymując się w przeciwną wideo, gdy zmienia się stan gracz grać.

Można grać z następującego kodu w 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

Oto zaawansowana wersja wersji @Matt Koskela „s. Nie wymaga tworzenia filmów przez JavaScript. Działa na przykład, jeśli filmy są generowane po stronie PHP (pomyśl o 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> 

Edit: Wyjazd Jennie Sadler's fine-tuned version below jeśli filmy zaczynają jako miniatury.

Answer 3

vbence „s rozwiązanie jest bardzo blisko, ale jest jedna edycja Sugerowałbym. Powinieneś sprawdzić, czy inni gracze grają, zanim je wstrzymasz, w przeciwnym razie, odtwarzanie pierwszego osadzenia na stronie będzie odtwarzać/wstrzymywać wszystkie inne osadzenia na stronie, usuwając miniaturkę podglądu i tworząc zaskakujące efekty uboczne.

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