Antworten auf deine Fragen:
Neues Thema erstellen

Seite erst anzeigen wenn Video geladen wurde

Coulyo

Director

Ahoi!
Ich hab eine Frage zu HTML5 und dem neuen <video>-Tag.
Ich spiele gerade ein bisschen damit rum und arbeite an . Die Seite besteht im Prinzip aus 3 Bildern, hinter denen sich Videos verstecken, die abgespielt werden, wenn man über die Bilder hovert. Das funktioniert auch alles gut, wenn man allerdings die Seite das allererste Mal aufruft, sind die Videos nicht sofort verfügbar, wenn man über eines der Bilder hovert und man sieht für einen Moment nur eine schwarze Fläche. Das ist natürlich für einen Besucher, der nicht weiß, dass da eigentlich ein Video sein sollte sehr verwirrend.
Das Problem verschwindet wenn man die Seite neu lädt und tritt dann (zumindest bei mir) auch erst wieder auf wenn man den Browser-Cache löscht. Trotzdem stört es mich extrem und ich suche nach einer Möglichkeit die Videos irgendwie vorab zu laden und erst dann die Seite anzeigen zu lassen.
Mit der preload Eigenschaft des <video>-Tags habe ich es schon versucht, allerdings arbeitet die von Browser zu Browser sehr unterschiedlich.

Hat vielleicht jemand einen Tipp für mich? :)
 

lachender_engel

Aktives Mitglied

Du musst berücksichtigen, dass ein Browser nur anzeigen, was auf das Wiedergabegerät geladen wurde. So auch mit dem Video. Je mehr Daten, um so länger dauert die Ladezeit - denn nicht alle haben schnelles DSL. Das gebe ich zu bedenken!

Nun zu Deiner Frage: Mir fällt nur ein, dass Du einen Preloader auf die ganze Seite legen kannst der erst dann verschwindet, wenn alle Daten der Seite geladen wurden.
Altrnativ aktivierst Du den Hover-Effekt erst, wenn die Videos vollständig geladen sind.
Warten muss der Besucher immer - die Frage ist nur, wie Du die Wartezeit "verschönderst" ;-).
 

Coulyo

Director

Warten muss der Besucher immer - die Frage ist nur, wie Du die Wartezeit "verschönderst" ;-).

Das ist mir natürlich klar :) Ich habe auch schon versucht einen kleinen Preloader einzubauen, indem zuerst ein Overlay mit einem Ladebalken zu sehen ist, das dann per jQuery versteckt wird, wenn $(document).ready() aufgerufen wird. An dem Problem ändert das aber merkwürdigerweise gar nichts.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben