WebSite X5Help Center

 
Ukraine.report .
Ukraine.report .
User

Lazy loading für Videos  de

Auteur : Ukraine.report .
Visité 486, Followers 1, Partagé 0  

ich hab auf meiner Website :

https://ukrainedaily.net/chruschtschow.html

einige Youtube Videos, die in dem Vorschaufenster - nach dem Anklicken zu sehen sind

Mit diesem Code:

<p id='inner1' onclick='changeText1()'><img src='bilderYT/1.jpg' width='100%' height='210'></p>

<script>
function changeText1(){document.getElementById('inner1').innerHTML = "<iframe width='100%' height='210' src='https://www.youtube.com/embed/0j1awlWTDKY?start=164&end=236&autoplay=1' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe";}
</script>

Wie kann ich ein Laden des Videos erst dann erfolgen lassen, wenn es erst im Sichtbereich der Leser ist?

Dann das Laden aller 20 Videos braucht zu viel Zeit.

lg Andre

Posté le
15 RéPONSES - 2 UTILE - 1 CORRECT
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Normalerweise sollte erst beim Klick auf das Vorschaubild der YouTube-Iframe-Code das Vorschaubild ersetzen, so dass der Iframe-Code vorher nicht aktiv ist - so habe ich die Javascript-Funktion verstanden.

Genauere Infos von den Javascript-Experten.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Also sollte immer nur das Videos geladen werden, dessen Vorschaubild der Besucher angeklickt hat und nicht die anderen Videos, denn an deren Stelle werden ja nur die Vorschaubilder geladen.

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

ja du hast recht - aber bei manchen videos verwende ich kein extra Vorschaubild sonder übernehme das schon vorgegebene mit folgenden code.

Wie bewirke ich da ein lazy loding ?

<iframe width='100%' height='210' src='https://www.youtube.com/embed/HbfgRy1AvFo?start=0&end=207  ' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe>

lg Andre

Lire plus
Posté le de Ukraine.report .
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Dann gebe ich mal eine Hausaufgabe, um sich das Lazy Loading selber zu basteln. siehe

-----

Lazy Loading mit JavaScript

Mittlerweile gibt es unzählige JavaScript-Vorlagen für Lazy Loading, die Sie einfach in Ihre Website einbinden können. Eine schlanke Lösung ohne jQuery bietet beispielsweise das bereits erwähnte Skript LazyLoad. Zusätzlich zu der Möglichkeit, natives Lazy Loading für Bilder, Videos und iFrames einzustellen, unterstützt das 2,4 KB (Kilobyte) große Skript unter anderem auch responsive Bilder.

>> https://www.ionos.de/digitalguide/websites/webseiten-erstellen/lazy-loading/

-----

Vielleicht liefern diesmal die Javascript-Experten die fertige und getestete Lösung frei Haus.

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

danke hat mir leider nicht geholfen - wie ich es mit einem video mache  trotzdem danke. lg Andre

Lire plus
Posté le de Ukraine.report .
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Es ist nicht so einfach mit Javascript, da die meisten Javascript-Hilfeseiten nur ganze selten fertige Scripte liefern, meistens fehlt etwas. Für Javascript-Experten genügen vielleicht diese Bruchstücke als Anregung, aber für die Anderen ist es schwierig bis unmöglich daraus einen funktionierden Code zu basteln.

Da meine Javascript-Kenntnisse gering sind, muss ich bei Google oft 10 oder mehr Webseiten durchsuchen, um brauchbaren Code zu finden und zahlreiche Tests machen bis der Code so funktioniert wie er soll. Wenn ich den Kopf frei habe, dann suche ich mal weiter nach passendem Code.

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

danke in jeden  Fall für Deine Bemühungen - kein Stress :) lg Andre

Lire plus
Posté le de Ukraine.report .
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

2 Funde:

A) Ich habe ein Plugin für ein bekanntes CMS gefunden, das das gleiche Prinzip wie bei meinem Code nutzt und erstmal Vorschaubilder setzt, die beim Klick dann durch den Iframe-Code ersetzt werden.

B) Dann habe ich ein kurzes Code-Kombi-Beispiel für eben dieses bekanntes CMS gefunden, das mit PHP- und Javascript-Code arbeitet und das man bei WebSite X5 ausprobieren könnte, siehe

>> https://fastwp.de/lazy-load-fur-videos-ohne-plugin/

Überlegungen für den Einbau von B) - ungetestet:

Den ersten Teil müsste man zwischen <php> und </php> setzen und in einem HTML-Objekt einfügen, die Seite müsste unter "3 Sitemap" markiert werden, dann oben auf "Eigenschaften" klicken und dann den Reiter "Erweitert" anklicken, hier bei "Dateinamenformar: php" einstellen.

Für den zweiten Teil ebenfalls die Seite unter "3 Sitemap" markieren, dann oben auf "Eigenschaften" klicken und dann den Reiter "Erweitert" anklicken, hier bei "Benutzerdefinierter Code: Vor dem </BODY> Tag" den Code zwischen <script> und </script> eintragen.

Wer will es mal ausprobieren?

Vielleicht könnten es die PHP- und Javascrit-Experten mal testen - ich muss ja nicht alles machen.

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

interessant:

Diesen Teil setze ich wo ein:?

function add_video_load( $content ) { if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) ) return $content; if ( false !== strpos( $content, 'data-src' ) ) return $content; $placeholder_image = ('data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); $content = preg_replace( '#<iframe([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<iframe${1}src="%s" data-src="${2}"${3}>', $placeholder_image ), $content ); return $content; } add_filter( 'the_content', 'add_video_load' );

und den Zweiten Teil siehe Bild?

<script>function init(){var videoDefer=document.getElementsByTagName('iframe');for(var i=0;i<videoDefer.length;i++){if(videoDefer[i].getAttribute('data-src')){videoDefer[i].setAttribute('src',videoDefer[i].getAttribute('data-src'));}}}window.onload=init;</script>

und in php geändert ... ?

lg Andre

Lire plus
Posté le de Ukraine.report .
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Das ist etwas für die PHP- und Javascript-Experten.

Ich habe es noch nicht geschafft, dass der PHP-Code zwischen <php>...</php> unsichtbar bleibt, obwohl ich ihn in einem HTML-Objekt hatte und das Dateinamensformat auf "php" eingestellt war.

Der Dateiname hatte auch die Endung.php und da sollte der PHP-Code eigentlcih nicht auf der Webseite sichtbar sein, aber irgendetwas ist das noch falsch - das Problem ist nur, dass ich nicht weiß wo.

Deshalb hoffe ich, dass die PHP- und Javascrit-Experten sich die Sache auch mal ansehen.

Vielleicht finde ich den PHP-Fehler noch, damit ich anschließend die Javascript-Funktion testen kann. Und wenn es heute Nachts nichts wird, dann womöglich in der nächsten Nacht oder die Experten präsentieren die fertige Lösung und ich muss mir nicht weiter den Kopf zerbrechen.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Jetzt weiß ich es wieder ...

<?php
echo "Hallo, ich bin ein PHP-Skript!";
?>

... es sind diese Zeichen, die Anfang und Ende von PHP-Code markieren.

Ich habe schon zu lange nichts mehr mit PHP gemacht - vor etwa 15 jahren habe ich einer PHP-Scriptschreiberin in deren Forum geholfen als die Nutzer der PHP-Scripte Fehlermeldungen hatten.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Jetzt wird gar nichs mehr angezeigt - also auf die PHP- und Javascript-Experten warten.

Ich lasse das Thema mit dieser PHP-Javascript-Kombination mal ruhen und schauen nach einer Javascript-Lösung ohne PHP.

Vor 15 Jahren habe ich nicht mit PHP-Funktionen gearbeitet, sondern mit einfachen PHP-Ablauf-Scripten und mit Textdateien als Datenbank. Das hatte die Scriptschreiberin damals auch genutzt.

Also Geduld - entweder finden die Experten etwas oder ich oder es bleibt ohne Lazy Loading.

Lire plus
Posté le de Daniel W.
Ukraine.report .
Ukraine.report .
User
Auteur

ok danke es hat mir mal etwas geholfen lg 

Lire plus
Posté le de Ukraine.report .