Starten Sie youtube video-on-hover/mouseover

Ich versuche, youtube-videos zu starten, die auf hover. Es wird auf pause (nicht auf stop), wenn der Benutzer mit der Maus über ein anderes video...

Ich bin fest auf dem hover-Befehl. Kann mir jemand helfen, es klappt bitte?

Die Seite hat 16 videos, dies ist der Arbeits-code aus dem jsfiddle enthält 3 videos, wie ein Beispiel.

http://jsfiddle.net/sebwhite/gpJN4/

VIDEO:

<iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>

JAVASCRIPT:

function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
     events: {
         'onStateChange': onPlayerStateChange
     }
 });

onYouTubeIframeAPIReady();
function onPlayerStateChange(event) {
 if (event.data == YT.PlayerState.PLAYING) {
     player1.pauseVideo();
     player2.pauseVideo();
 }
Hi Seb, versuchen Sie diesen link stackoverflow.com/questions/15398745/...
Hi @Phil, ich habe ausdrücklich nicht wollen, es zu starten, klicken Sie auf, oder bin ich völlig falsch? Mein Hirn in overdrive gegangen über dies und ich weiß nicht, warum ich kann ' T es herausfinden.
Ich nehme an, Sie könnten zeichnen ein transparentes div über der Oberseite der video-player und Stopp-Klicks?
Ich bin nicht gegen anhalten Klicks - ich will einfach ein video Abspielen bei mouseover, die Leute klicken können, um pause oder klicken Sie doppelt auf Vollbild, wenn Sie wollen...
In diesem Fall sieht es aus wie Pauls Lösung unten funktioniert das?

InformationsquelleAutor seb | 2013-12-20

  1. 9

    AKTUALISIERT FIDDLE

    Versuchen Sie dies:

     var $$ = function(tagname) { return document.getElementsByTagName(tagname); }

 function onYouTubeIframeAPIReady() {
     var videos = $$('iframe'), //the iframes elements
         players = [], //an array where we stock each videos youtube instances class
         playingID = null; //stock the current playing video
     for (var i = 0; i < videos.length; i++) //for each iframes
     {
         var currentIframeID = videos[i].id; //we get the iframe ID
         players[currentIframeID] = new YT.Player(currentIframeID); //we stock in the array the instance
         //note, the key of each array element will be the iframe ID

         videos[i].onmouseover = function(e) { //assigning a callback for this event
             var currentHoveredElement = e.target;
             if (playingID) //if a video is currently played
             {
                 players[playingID].pauseVideo();
             }
             players[currentHoveredElement.id].playVideo();
             playingID = currentHoveredElement.id;
         };
     }

 }
 onYouTubeIframeAPIReady();

    Fiddle:

    http://jsfiddle.net/gpJN4/3/

    Rufen Sie mich ein idiot, aber im Kontext der den code habe ich schon / das Szenario, dass mehr als ein video? Sorry, nur versuchen, um meinen Kopf um ihn herum.
    Das einzige problem mit diesem ist, dass die videos nicht unterbrechen. Ich bin versucht, es zu erhalten, so dass Sie Rollen kann, über die videos und das video mit der Maus auf spielen, bis Sie Rollen Sie auf ein weiteres video.
    Aktualisiert.... bitte abstimmen und versuchen, bevor Fragen für den Fortschritt 😉
    Das ist genial. Es funktioniert hervorragend, OBWOHL (und nicht hassen mich), aber ich habe einen Weg gefunden, für es nicht zu funktionieren. Wenn Sie eines der videos auf autoplay, dann, wenn Sie den Mauszeiger auf etwas anderes, die Sie beide spielen. Gibt es eine Möglichkeit zum hinzufügen von Unterstützung zur pause autoplaying videos?

    InformationsquelleAutor Paul Rad

Schreibe einen Kommentar