Seite erst anzeigen wenn Video geladen wurde

[Coulyo]

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?

 

[monika_g]

Dann sind Deine Besucher weg, noch bevor sie die Seite gesehen haben.

 

[lachender_engel]

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" ;-).

 

[CrazyLopp]

Vielleicht hilft dir das weiter:
http://www.createjs.com/#!/PreloadJS

 

[Coulyo]

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.