Pause YouTube iframe einbetten, wenn eine andere abgespielt wird

Question

Ich habe mehrere YouTube iFrames auf einer Seite eingebettet. Wenn einer der Filme bereits abgespielt wird und ein Benutzer sich entscheidet, einen anderen Film abzuspielen, ist es dann möglich, den ersten Film abzuspielen, so dass immer nur einer abgespielt wird?

Ich habe mir die 'YouTube Player API Referenz für iframe Embeds' https://developers.google.com/youtube/iframe_api_reference angesehen, aber wenn ich ehrlich bin, verstehe ich es einfach nicht. Meine Entwicklerfähigkeiten sind sehr begrenzt .... klar.

Pitiful Ich weiß, aber das ist alles, was ich im Moment haben (nur die 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> 

Ich dachte, alles, was ich zu tun war, brauchte hinzufügen '& enablejsapi = 1' in der Ende der Video-URLs.

Jede Hilfe würde sehr geschätzt werden.
Vielen Dank im Voraus.

Answer 1

Anstatt Iframes zu verwenden, möchten Sie die iFrame Player-API verwenden. Abhängig davon, wie viele Videos du tatsächlich einbetten möchtest, möchtest du vielleicht dieses JavaScript dynamischer gestalten, aber dieses Arbeitsbeispiel sollte dir genug geben, um loszulegen.

Im Grunde mache ich hier die beiden Spieler initialisieren und pausiere das gegenteilige Video, wenn sich ein Spielerstatus ändert.

Sie können 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

hier mit dem folgenden Code spielen ist eine erweiterte Version von @Matt Koskela ‚s-Version. Sie müssen die Videos nicht mit JavaScript erstellen. Es funktioniert zum Beispiel, wenn die Videos auf der PHP-Seite generiert werden (denke 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: Check out Jennie Sadler's fine-tuned version below wenn Ihre Videos starten als Thumbnails.

Answer 3

vbence 's Lösung ist wirklich in der Nähe, aber es gibt eine Bearbeitung, die ich vorschlagen würde. Sie sollten überprüfen, ob die anderen Spieler spielen, bevor Sie sie anhalten. Andernfalls werden beim Abspielen der ersten Einbettung auf der Seite alle anderen Einbettungen auf der Seite abgespielt, die Vorschauvorschau entfernt und verblüffende Nebenwirkungen erzeugt.

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