WebSite X5Help Center

 
Ukraine.report .
Ukraine.report .
User

Lazy loading für Videos  de

Autore: Ukraine.report .
Visite 485, Followers 1, Condiviso 0  
Parole Chiave: html,website x5 pro 2023.3

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

Postato il
15 RISPOSTE - 2 UTILI - 1 CORRETTO
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Ukraine.report .
Ukraine.report .
User
Autore

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

Leggi di più
Postato il da Ukraine.report .
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Ukraine.report .
Ukraine.report .
User
Autore

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

Leggi di più
Postato il da Ukraine.report .
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Ukraine.report .
Ukraine.report .
User
Autore

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

Leggi di più
Postato il da Ukraine.report .
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Ukraine.report .
Ukraine.report .
User
Autore

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

Leggi di più
Postato il da Ukraine.report .
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese 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.

Leggi di più
Postato il da Daniel W.
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese EN

Zum Schluß noch ein Link zum Thema ...

>> https://web.dev/articles/iframe-lazy-loading?hl=de

... und damit ist das Thema Lazy Loading für mich abgehakt.

-----

"Zu Risiken und Nebenwirkungen fragen Sie Ihren Computer oder Browser."

Leggi di più
Postato il da Daniel W.
Ukraine.report .
Ukraine.report .
User
Autore

ok danke es hat mir mal etwas geholfen lg 

Leggi di più
Postato il da Ukraine.report .