Ich habe eine Pause-Schaltfläche für ein YouTube-Video erstellt. Das hat gut funktioniert, aber jetzt muss ich das Video klonen. Dies liegt daran, wie das Karussell funktioniert und auch so das Video in einer Lightbox angezeigt werden kann.
Im Folgenden finden Sie eine vereinfachte Version meines Codes. Jetzt funktioniert die Pausetaste nur beim ersten Video. Wie kann ich eine Schaltfläche erstellen, die alle geklonten Videos pausiert?
%Vor%Tatsächlich gibt es ein Konzept für tiefes Klonen und oberflächliches Klonen. Flaches Klonen kopiert keine Ereignisse, daher müssen Sie das tiefe Klonen verwenden. Wo immer Sie clone () verwenden, verwenden Sie stattdessen clone (true). Zum Beispiel können Sie im obigen Code-Snippet verwenden:
%Vor%
In Ihrem Code passiert Folgendes: Sie klonen und erstellen zwei IDs innerhalb einer einzelnen DOM-Last, was bedeutet, dass Ihr JavaScript widersprüchliche IDs aufweist. Das andere Problem ist, dass die Youtube-API-Erstellungsfunktion an eine ID und nicht an eine Klasse bindet.
Nachdem Sie also Ihren iframe geklont haben, wird Ihre ursprüngliche Funktion (in player gehalten) jetzt auf zwei Stellen gerichtet ... daher die Verwirrung.
Um dies zu bekämpfen, können wir einen Platzhalter verwenden. Basierend auf der Youtube-Player-API-Referenz ermöglicht Youtube das Laden von Videos auf ein Player-Objekt. %Vor%
[Weitere Informationen finden Sie unter Youtube-API # Queueing_Functions ]
Wir können Klassen und Objektreferenzen verwenden, um Ihr Ziel zu erreichen:
%Vor% Der Platzhalter kommt jetzt ins Spiel, wenn das Karussell das Ereignis beforeChange auslöst. Sie können auf das Element player in der aktuellen / nächsten / vorherigen Folie zugreifen, indem Sie den event -Handler des Karussells verwenden und $(event.target).find('youtube-player') (oder etwas ähnliches, APIs sind anders, also YMMV) und Zugriff auf die Player Instanz mit $(event.target).find('youtube-player').data('YoutubeAPI') (oder wie immer du deine Datenvariable benannt hast).
Dann finden Sie einfach die Video-ID aus dem Original-Objekt (mit dem Zugriffsschema von oben und die ID aus dem YoutubeAPI-Objekt) und laden Sie das Video in den Platzhalter mit dem API-Aufruf von oben.
Tags und Links youtube-api