Inhalte vorladen (Videos etc.)

[J_Hunt]

Hallo Liebes Forum,

ich habe folgendes Problem:

Wie im Titel beschrieben möchte ich gerne Inhalte vorladen - einige werden jetzt sagen, "dafür gibt es schon hunderte Themen" - Nein für dieses leider nicht. Oder ich habe jegliche Sufu falsch genutzt.

Folgendes ist der Stand der Dinge - Ich habe eine html Webseite für einen Kumpel gemacht. Alles mit CSS und HTML beschrieben und viele Funktionen mit Javascript gelöst. Ich habe mehrere Container, die jeweils bei Klick auf einen Menüpunkt ein und ausgeblendet werden - dazu jeweils ein Hintergrund Video, welches gewechselt wird. Eine Art preloader habe ich schon probiert - jedenfalls nur einen, der überprüft ob die ganze Seite geladen ist und dann den overlay ausblendet und die Seite anzeigt. Soweit so gut. Leider blende ich ja am Anfang schon über "show" und "hide" per Javascript alle Videos und Inhalte aus, die ich aktuell nicht brauche, sodass der preloader lediglich den erst "sichtbaren" Inhalt vorläd und alles andere nicht. Beim Klick auf einen anderen Menüpunkt, werden alle nicht benötigten Container ausgeblendet und die benötigten, inklusive Inhalte BG´s und BG Video eingeblendet, dann startet natürlich auch erst die Ladezeit und es dauert, bis das Video angezeigt wird.

Gibt es eine Möglichkeit alle Videos, die jemals angezeigt werden sollen sich aber noch in "hide" befinden, vorzuladen sodass der preloader all diese erfasst und die Seite erst dann frei gibt? Sprich nicht nur zu schauen ob alles im HTML Content geladen ist, sondern auch alles, was beim Start auf "hide" steht geladen wird vorher? Alternativ würde ich auch etwas bauen, was im Prinzip bei klick auf den neuen Menüpunkt eine Aktion startet, einen Preloader zeigt und im Hintergrund alle Inhalte läd, die bei dem aktuellen Menüpunkt geladen werden. Sprich, ich klicke auf den Button "Über mich", es erscheint ein preloader im Hintergrund mit Statusanzeige und der läd erstmal die Inhalte , die der nächste Menüpunkt braucht - Hauptsächlich sind das jeweils immer die Videos im BG, die sind sehr groß!

Vielen Dank im voraus!

Grüße, Hunter!

 

[sheel]

Hi und Willkommen bei tutorials.de

sind die ausgeblendeten Videos wirklich nur unsichtbar (also noch im DOM vorhanden),
oder wird die entsprechende HTML-Struktur beim Umschalten mit JS erst neu erzeugt?

Sind die Videos mit dem <video> - Tag eingebunden, oder mit irgendeiner Playersoftware (jwplayer...)?

Kannst du uns die wichtigen Teile vom derzeitigen Code zeigen?
(HTML-Grundstruktur, CSS, JS-Umschaltung, Video-Einbindung)

 

[Sempervivum]

Beim Vorladen von Videos musst Du - anders als bei Bildern - berücksichtigen, dass sie praktisch immer gestreamt werden, also dass das Abspielen bereits beginnt, wenn sie noch gar nicht vollständig geladen sind. Ein Vorladen der vollständigen Videos würde die Ladezeit unverhältnismäßig lang machen. Man müsste sich mal die API des video-Tags ansehen, ob es ein Event gibt, das feuert, wenn das Video soweit geladen ist, dass das Abspielen beginnen kann. Hiernach:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
gibt es die Eigenschaft readyState, die dies angibt.
Möglicher Weise kann man auch das Event "loadeddata" verwenden:
https://developer.mozilla.org/en-US/docs/Web/Events/loadeddata
Man müsste prüfen, welchen Wert readyState hat, wenn dieses Event feuert.
Und man müsste prüfen, ob das Laden begonnen wird, wenn das Video gar nicht sichtbar ist