Youtube API mehrere Videos mit Ereignissen

Question

Liebe Community!

Ich möchte mehrere Videos auf meiner Website zeigen. Die Lautsprecher sollten standardmäßig deaktiviert sein (ich benutze die Mute() - Funktion).

Und die Videos sollten automatisch abgespielt werden, wenn der Benutzer scrollt und die Videos in das Browser-Ansichtsfenster gelangen.

Ich baute dies mit einem einzigen Video - arbeitete wie ein Charme. Aber nicht mit mehreren Vidoes auf einer Seite ..

bitte helfen, was vermisse ich in meinem Code?

Dies ist html-Teil:

<div class="video-container"> 
<div data-id="olBOo_S5AHY"></div> 
</div> 

<div class="video-container"> 
<div data-id="3IXKIVZ9T-U"></div> 
</div> 

<div class="video-container"> 
<div data-id="LAQDcnwwspQ"></div> 
</div> 

Die Übersicht zeigt die js-Part:

function onYouTubePlayerAPIReady() { 

var players = document.querySelectorAll('.video-container div') 

for (var i = 0; i < players.length; i++) { 
    new YT.Player(players[i], { 
     width: 600, 
     height: 400, 
     videoId: players[i].dataset.id, 
     events: { 
     onReady: initialize 
     } 


    }); 
} 
} 

function initialize(){ 

players[i].mute(); // I know that players[i] is wrong.. 

var waypoints = jQuery('.video-container').waypoint(function() { 


    if(players[i]) { // I know that players[i] is wrong.. 
     var fn = function(){ 
     players[i].playVideo(); // I know that players[i] is wrong.. 
     } 
     setTimeout(fn, 1000); 
    } 

}, { 
    offset: '50%' 
}) 
} 

So werden die Videos auf meiner Website zeigen, aber ich habe keine Ahnung, wie diese hinzufügen Ereignisse zu jedem einzelnen Video? Was bin ich falsch

(viel zu tun Ich denke, (....)

Danke

Melanie

Answer 1

Hej Milenoi,

Ihre players Variable ist ein nodeList! der von dir abgefragten divs - und enthält keine adressierbaren YouTube-Elemente Du musst diese youtube player-Objekte einer bestimmten Stelle zuweisen, um sie zu adressieren. (Oder mag es eine andere Magie geben, sie zu finden?)

Werfen Sie einen Blick auf meine Bin hier: http://jsbin.com/hozaluzaho Es ist ein funktionierendes Setup - wenn Sie nach unten scrollen, werden Sie die anderen Spieler auslösen. Sie können sehen, wie ich die benötigten Objekte erstellt habe und so weiter.

// get .player nodes 
var playerDivs = document.querySelectorAll(".player"); 

// nodelist to array to use forEach(); 
var playerDivsArr = [].slice.call(playerDivs); 

var players = new Array(playerDivsArr.length); 
var waypoints = new Array(playerDivsArr.length); 

// when youtube stuff is ready 
function onYouTubeIframeAPIReady() { 

    // create yt players 
    playerDivsArr.forEach(function(e, i) { // forEach ... 
    players[i] = new YT.Player(e.id, { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { /* no events set */ } 
    }) 
    }) 

    // create waypoints 
    $(".player").each(function(i, e) { 
    waypoints[i] = new Waypoint({ 
     element: e, 
     handler: function() { 
     players[i].playVideo(); 
     } 
    }) 
    }); 

} 

EDIT ADDITION:

wieder Hej,

Keine Sorge, Die Initialisierungsfunktion über das Array mit den vielen YouTube-Player-Objekte iterieren muss, Sie sprechen nur zu einer player Variable in Ihre Initialisierungsfunktion (die möglicherweise nicht einmal eingestellt wurde, als Sie meinen Code befolgten?). Schauen Sie sich die Stelle an, wo create yt players oben steht. Sie sehen, dass jeder Slot des Arrays players[] mit einem Player-Objekt gefüllt wird. Dann müssen Sie wieder mit jedem von ihnen sprechen, um ihnen zu sagen .mute(). In der Schleife forEach wird das aktuelle Objekt aus dem Array an die Variable yt übergeben.

function initialize() { 
    players.forEach(function(yt, i) { 
    yt.mute(); 
    }); 
} 

ein anderer bin: http://jsbin.com/ficoyo/edit?html,output

Prost!