Sospendi l'iframe di YouTube incorporato quando riproduci un altro

Question

Ho più iFrame di YouTube incorporati in una pagina. Se uno dei film è già in riproduzione e un utente decide di iniziare a riprodurre un film diverso, è possibile interrompere la riproduzione del primo film in modo che venga riprodotto solo uno alla volta?

Ho esaminato il 'Riferimento API YouTube Player per iframe Embeds' https://developers.google.com/youtube/iframe_api_reference ma se sono onesto, semplicemente non lo capisco. Le mie capacità di sviluppatore sono molto limitate ... chiaramente.

Pitiful lo so, ma questo è tutto quello che ho in questo momento (solo l'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> 

ho pensato che tutto quello che dovevo fare era aggiungere '& enablejsapi = 1' al fine degli URL dei video.

Qualsiasi aiuto sarebbe molto apprezzato.
Grazie in anticipo.

Answer 1

Invece di utilizzare iframe, in realtà si desidera utilizzare l'API di iFrame Player. A seconda del numero di video che volevi incorporare, potresti voler rendere questo javascript più dinamico, ma questo esempio di lavoro dovrebbe darti abbastanza per iniziare.

Fondamentalmente quello che sto facendo qui è inizializzare i due giocatori e mettere in pausa il video opposto quando lo stato di un giocatore cambia in gioco.

Si può giocare con il seguente codice 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

Ecco una versione avanzata di versione @Matt Koskela s'. Non richiede che tu crei i video per JavaScript. Funziona ad esempio se i video sono generati dal lato PHP (si pensi a 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: Partenza Jennie Sadler's fine-tuned version below se i tuoi video inizia come miniature.

Answer 3

vbence La soluzione è molto simile, ma c'è una modifica che suggerirei. Dovresti controllare che gli altri giocatori stiano giocando prima di metterli in pausa, altrimenti, giocando il primo embed sulla pagina, riprodurrà/metterà in pausa ogni altro embed sulla pagina, rimuovendo la miniatura dell'anteprima e creando effetti collaterali sorprendenti.

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