videos werden nicht (mehr) geladen: jquery.unveil.js / jquery.js

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

YotErra

Mitglied
hey ihr lieben,
nach sehr viel arbeit und sehr viel hilfe in veränderung der .js habe ich eine youtube-songliste erstellt:
POZILEI (ich selbst von .js kaum ahnung...)

alles in der jquery.unveil.js / jquery.js wurde hier dank des forums quasi traumhaft angepasst: damit nur geladen wird was sichtbar, und beim scrollen nur geladen wenn scrollbalken steht (damit nicht beim ganz ans ende scrollen alles sichtbare geladen wird) und wenn ein neues video angeklickt wird wird das laufende automatisch gestoppt. träumchen. theoretisch milliarden links möglich ohne ladezeitperformence zu killen... (theoretisch)

dann irgendwann gab es aber praktisch schon mal einen ladefehler, da hat youtube was geändert, die videos wurden nicht mehr reingeladen. hier im forum wurde herausgefunden woran es lag. u.a. in der index.html zeile 450 (Brackets)

function onPlayerReady(event) {
$(event.target.f).prev("img").hide(); // bis Juni 2020 "event.target.a" -> jquery unveil funktioniert nicht mehr ;
}

und nun werden die videos schon seit etlichen monaten wieder nicht geladen...
ist hier jemand der ggf. helfen kann dies zu beheben?
YotErra
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Hallo YotErra und Willkommen zurück!
Ich habe mir das angesehen und das Ergebnis ist, dass Youtube mal wieder etwas geändert hat: Den iFrame bekommt man jetzt durch event.target.h. Wenn Du das änderst, müsste es wieder funktionieren.
So weit die schnelle Lösung. Es gibt auch noch einen anderen Weg, und zwar kann man über die Funktion getVideoData() die ID des Videos heraus finden und darüber wieder das Ladebild. Dazu müsste aber die Video-ID dem Ladebild zugeordnet werden, z. B. als data-Attribut:
Code:
        function onPlayerReady(event) {
            const
                // Video-ID aus Videodaten auslesen:
                videoid = event.target.getVideoData().video_id,
                // daraus das Ladebild ermitteln:
                loadingImg = $('img[data-video-id="' + videoid + '"]');
            // und das Ladebild verbergen:
            loadingImg.css('display', 'none');
https://www.tutorials.de/threads/jquery-unveil-funktioniert-nicht-mehr.409127/#post-2117955 ;
        }

        function createPlayer(id) {
            // der ursprüngliche iFrame, der im HTML-Text steht.
            // dieser wird später zunächst durch ein div und dann
            // wieder durch den iFrame von YT ersetzt.
            const iFrame = $("#" + id);

            // Video-ID beim Ladebild als data-Attribut speichern:
            iFrame.prev('img').attr('data-video-id', players[id].videoid);

            iFrame.replaceWith('<div id="' + id + '"></div>');
            players[id].player = new YT.Player(id, {
                height: '226',
                width: '400',
                videoId: players[id].videoid,
                events: {
                    'onStateChange': onPlayerStateChange,
                    'onReady': onPlayerReady
                }
            });
            players[id].created = true;
        }
(ungetestet)
Natürlich hat man dann auch keine Garantie, dass YT nicht etwas wieder ändert, aber solch eine Getter-Funktion sollte eigentlich stabiler sein.
 

YotErra

Mitglied
hey Sempervivum - jajajaja - es funktionert mit h! POZILEI
tausend dank!
ich probiere in den kommenden wochen mich auch in die getVideoData() reinzufuxen - habe allerdings nach wie vor keinen js plan, da werde ich bestimmt Fragen fragen.

Sehr nervig ist auch dies andauernde "Dieses Video ist nicht verfügbar." - dafür gibt es bestimmt keinen anderen trick als regelmäßig zu checken und ggf. neuen link einfügen, wa?
 

Sempervivum

Erfahrenes Mitglied
Sehr nervig ist auch dies andauernde "Dieses Video ist nicht verfügbar."
Dazu habe ich mich ein wenig umgesehen und dieses gefunden:
How can I detect if YouTube videos have been removed using their iFrame API
Man kann es also über die API erkennen und z. B. in die Console schreiben. Oder, etwas aufwändiger, mit Ajax an den Server schicken und in ein Logfile schreiben.
Allerdings, die Aktivitäten um das zu reparieren, kann man wahrscheinlich nicht automatisieren.
 

YotErra

Mitglied
Hallo YotErra und Willkommen zurück!
Ich habe mir das angesehen und das Ergebnis ist, dass Youtube mal wieder etwas geändert hat: Den iFrame bekommt man jetzt durch event.target.h. Wenn Du das änderst, müsste es wieder funktionieren.
So weit die schnelle Lösung. Es gibt auch noch einen anderen Weg, und zwar kann man über die Funktion getVideoData() die ID des Videos heraus finden und darüber wieder das Ladebild. Dazu müsste aber die Video-ID dem Ladebild zugeordnet werden, z. B. als data-Attribut:
Code:
        function onPlayerReady(event) {
            const
                // Video-ID aus Videodaten auslesen:
                videoid = event.target.getVideoData().video_id,
                // daraus das Ladebild ermitteln:
                loadingImg = $('img[data-video-id="' + videoid + '"]');
            // und das Ladebild verbergen:
            loadingImg.css('display', 'none');
https://www.tutorials.de/threads/jquery-unveil-funktioniert-nicht-mehr.409127/#post-2117955 ;
        }

        function createPlayer(id) {
            // der ursprüngliche iFrame, der im HTML-Text steht.
            // dieser wird später zunächst durch ein div und dann
            // wieder durch den iFrame von YT ersetzt.
            const iFrame = $("#" + id);

            // Video-ID beim Ladebild als data-Attribut speichern:
            iFrame.prev('img').attr('data-video-id', players[id].videoid);

            iFrame.replaceWith('<div id="' + id + '"></div>');
            players[id].player = new YT.Player(id, {
                height: '226',
                width: '400',
                videoId: players[id].videoid,
                events: {
                    'onStateChange': onPlayerStateChange,
                    'onReady': onPlayerReady
                }
            });
            players[id].created = true;
        }
(ungetestet)
Natürlich hat man dann auch keine Garantie, dass YT nicht etwas wieder ändert, aber solch eine Getter-Funktion sollte eigentlich stabiler sein.

Hey Sempervivum (& alle anderen Durchblicker),
hoffe alles entspannt bei Dir!? Meine (im Grunde eher Deine) supertolle Polizei-Song-Sammlung macht schon wieder seit einigen Monaten schlapp und lädt die Videos nicht mehr rein:
POZILEI

Habe mich ein wenig in die API reingelesen, blicke da leider nach wie vor nicht durch... YouTube Player API Reference for iframe Embeds | YouTube Iframe-API | Google Developers

Bei den letzten malen lag es an:

function onPlayerReady(event) {
$(event.target.h).prev("img").hide(); // bis Dez 2021 "event.target.f" ->✔ - videos werden nicht (mehr) geladen: jquery.unveil.js / jquery.js
// bis Juni 2020 "event.target.a" -> jquery unveil funktioniert nicht mehr ;
}

Ist es mit dem vorhandenen Aufbau zu lösen?
YotErra
 

Sempervivum

Erfahrenes Mitglied
Hallo YotErra, willkommen zurück! Danke, alles OK bei mir, ich hoffe, bei dir auch (wenn man von der Webseite absieht).
Ich habe mir das angesehen und beobachte (zunächst) das Problem, dass die Funktion onYouTubeIframeAPIReady nicht aufgerufen wird. Offensichtlich will das Javascript von YT sie aufrufen, bevor sie weiter unten definiert wird.
Versuche, das Einbinden, d. h. diese Zeile:
<script src="https://www.youtube.com/iframe_api"></script>
aus dem head heraus zu nehmen und statt dessen hinter das Javascript am Ende des body, vor das schließende </body> zu legen.
 

YotErra

Mitglied
<script src="https://www.youtube.com/iframe_api"></script>
aus dem head heraus zu nehmen und statt dessen hinter das Javascript am Ende des body, vor das schließende </body> zu legen.

hey Sempervivum, das wäre sehr schön wenn es so einfach gewesen wäre, wa? klappt leider nicht
POZILEI

und aber bisher lief es mit der Zeile im Head...
bis auf diese event.target.h/event.target.f/event.target.a veränderungen.

ich schätze mal so wirklich "für immer" wird es nie laufen. zumindest nicht so wie es aufgebaut ist. und im rahmen der möglichkeiten ist(war) es wirklich sehr toll! hauptsächlich dank deinem zutun.
ich glaube so langsam gibt mein ehrgeiz auf, um im rahmen meiner kenntnisse/möglichkeiten da weiterhin dran zu bleiben
YotErra

PS. Schönes Zitat hast Du da von Gide, kannte ich nicht.
hier mein Sartre-Hit:
"mit der Hoffnungslosigkeit beginnt der wahre Optimismus: der Optimismus dessen, der nichts erwartet, der weiß, daß er keinerlei Recht hat und ihm nichts zukommt, der sich freut, auf sich allein zu zählen und allein zum Wohl aller zu handeln." :)
 

Sempervivum

Erfahrenes Mitglied
Hallo YotErra, ich hatte nicht unbedingt erwartet, dass das schon das Problem löst, aber es ist dann einfacher, weiter zu debuggen wenn man in die Zweige überhaupt hinein kommt.
Ich hatte mir schon etwas überlegt, um mit dem Ganzen unabhängiger von Google zu werden und zwar über die Video-ID. Aber erst mal heraus finden warum es nicht mehr geht. Ich werden es mir bald ansehen.
 

Sempervivum

Erfahrenes Mitglied
... eine schnelle Lösung scheint relativ einfach zu sein: Das "h" durch ein "i" ersetzen:
$(event.target.i).prev("img").hide();
Im Debugger getestet und funktioniert.
 

YotErra

Mitglied
ja - gelöst, vielen lieben dank!
jetzt nur noch die nicht mehr verfügbaren videos ersetzen...
ist diese variable von youtube oder google...? (und wo kann ich so eine veränderung ggf. selbst finden?)
Schönen Abend
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…