video-Element: Preload verhindern, aber Thumbnail laden

[Nico R.]

Hallo zusammen,

es gibt auf meiner Vereinsseite ein Video-Archiv. Um die Serverlast zu verringern, möchte ich gerne, dass die Videodatei erst geladen wird, wenn der Benutzer auf Play klickt.

Da ich aber ein Vorschaubild anzeigen möchte, sollen die Metadaten schon geladen werden. Daher habe ich, wie im Wiki erklärt, preload="metadata" angegeben:

<video controls preload="metadata" data-src="<?=$video?>" onloadstart="this.volume=0.15">Schade, dein Browser kann dieses Video nicht wiedergeben.</video>

Leider musste ich gerade feststellen, dass sowohl Chrome als auch Firefox das Attribut ignorieren und beim Aufruf der Übersichtsseite alle Videos komplett herunterladen. Mit preload="none" kann ich das vermeiden. Allerdings wird dann auch kein Vorschaubild angezeigt.

Gibt es eine Möglichkeit, das Vorschaubild zu erhalten und das Laden der Datei zu verhindern?

edit: Nach dem, was ich gerade gelesen habe, muss ich wohl selbst ein Thumbnail basteln und per poster="thumb.jpg" angeben. Das ist natürlich ne nervige Sache. Ich bin der Meinung, die Lösung mit preload="metadata" hätte beim Aufbau des Videoarchivs vor zwei Jahren funktioniert. Oder irre ich mich da?

Schöne Grüße

Nico

[Gunnar Bittersmann]

@@Nico R.

Leider musste ich gerade feststellen, dass sowohl Chrome als auch Firefox das Attribut ignorieren und beim Aufruf der Übersichtsseite alle Videos komplett herunterladen.

Nein, das ist nicht der Fall. Bei mir jedenfalls nicht. Ich bin Feuer und Flamme. 🔥

Es werden vielleicht die ersten paar Sekündchen vorgeladen, damit das Video sofort startet, wenn die Nutzerin^[1] auf Play drückt, aber nicht das ganze Video. Das wird gestreamt.

🖖 Live long and prosper

---

1. männliche Nutzerinnen sind mitgemeint ↩︎

[Nico R.]

Hallo Gunnar,

stimmt. Ich hab mich davon irritieren lassen, dass die Videos unterschiedlich lang sind und damit auch der Vor-Ladebalken unterschiedlich. Dadurch dachte ich, dass die verschiedenen Videos durcheinander komplett geladen werden. Aber in der Tat bleibt der Balken stehen. Also doch alles in Ordnung so 👍

Und... oh, noch ein Gitarrenkollege. Die Musikerdichte hier im Forum scheint mir bemerkenswert hoch zu sein. Bemerkenswert auch, dass du in "live" viel sympathischer rüberkommst als hier im Forum 😁

Schöne Grüße

Nico

[Nico R.]

stimmt. Ich hab mich davon irritieren lassen, dass die Videos unterschiedlich lang sind und damit auch der Vor-Ladebalken unterschiedlich. Dadurch dachte ich, dass die verschiedenen Videos durcheinander komplett geladen werden. Aber in der Tat bleibt der Balken stehen. Also doch alles in Ordnung so 👍

Ich hab gerade festgetellt, dass das nur Chrome betrifft. Der FF lädt leider das komplette Video. Naja, "glücklicherweise" benutzt den ja anscheinend kaum noch jemand. Ich hoffe einfach mal, dass der mobile Chrome und Safari auch richtig machen - kann ich gerade nicht testen.

Schöne Grüße

Nico

[Felix Riesterer]

Lieber Nico,

Naja, "glücklicherweise" benutzt den [FF] ja anscheinend kaum noch jemand.

also ich bin froh um jeden nennenswerten Marktanteil, der nicht an Chrome und Konsorten geht. Die Vielfalt der Browser mag zwar volkswirtschaftlich nicht so sinnvoll sein, was die Einhaltung der Standards angeht, ist sie es aber sehr. Und was Google samt seinem Brauser angeht... das ist doch gerade nebenan die Frage.

Liebe Grüße

Felix Riesterer

[Nico R.]

Hallo Felix,

ich bin da ganz bei dir. Deswegen ja die "Gänsefüßchen" bei "glücklicherweise". War vielleicht etwas mistverständlich.

Schöne Grüße Nico

[Gunnar Bittersmann]

@@Nico R.

Ich hab gerade festgetellt, dass das nur Chrome betrifft. Der FF lädt leider das komplette Video. Naja, "glücklicherweise" benutzt den ja anscheinend kaum noch jemand.

Ich benutze Firefox. Und ich kann dir versichern, dass mein Firefox nicht das komplette Video lädt.

🖖 Live long and prosper

[Nico R.]

Hallo Gunnar,

das ist seltsam. Ich nutze die aktuelle Version 152.0.4 unter Windows und bei mir sehen die verschiedenen Ladebalken so aus:

Das ist der Vorlade-Endzustand. Mein FF lädt den Großteil des Videos, mal um die 80 % mal 95 % – ein System kann ich da nicht erkennen.

Kann das eventuell noch jemand verifizieren?

Schöne Grüße

Nico

[Gunnar Bittersmann]

@@Nico R.

das ist seltsam. Ich nutze die aktuelle Version 152.0.4 unter Windows und bei mir sehen die verschiedenen Ladebalken so aus:

Das ist der Vorlade-Endzustand. Mein FF lädt den Großteil des Videos

Tut er das? Oder hat er das schon bei einem vorigen Seitenaufruf getan, wo du die Videos angespielt hast und dein Browser die Teile noch im Cache hat?

In die Entwicklertoolbar > Netzwerkanalyse hast du schon reingesehen?

🖖 Live long and prosper

[Nico R.]

Hallo Gunnar,

nein, nicht aus dem Cache. Nach einem Hard Refresh wandern die Balken wie oben beschrieben hoch, sichtbar auch in der Netzwerkanalyse.

Schöne Grüße

Nico

[Gunnar Bittersmann]

@@Nico R.

es gibt auf meiner Vereinsseite ein Video-Archiv.

Da bin ich gerade übers Hauptmenü gestolpert.

Bei der Navigation per Tastatur landet der Fokus auf Links, die überhaupt nicht zu sehen sind. (Der erste ist https://www.fsv-optik.de/index.php?section=saison&saisonsection=saison_tabelle&saison_id=37.) Das sollte nicht sein. Entweder du sorgst dafür, dass die unsichtbaren Links nicht in der Tab-Reihenfolge sind und sich das jeweilige Untermenü auf eine Nutzeraktion öffnet, oder du öffnest das jeweilige Untermenü, wenn der Fokus auf einem Link darin ist:

nav nav:focus-within {
  max-height: revert;
}

nav in nav zu schachteln ist wohl keine gute Idee; Screenreader-Nutzer könnten verwirrt sein. Die inneren sollten keine nav-Elemente sein.

Das menu-Element ist ganz falsch. Das ist nicht für Navigationsmenüs da, sondern für Kommandos in einer Webapp. Siehe Spec. Das sollte ul sein.

🖖 Live long and prosper