[HTML-JAVASCRIPT-boh] temporizzare caricamento sito

[radeon_snorky]

salve gente!
spero sia la sezione giusta... altrimenti spostatemi che no la trovo!

dovrei realizzare un intro per un sito di un conoscente

si tratta di un video del perso di 1.8mb e uno di 400kb

siccome al momento non riesco ad ottimizzarlo ulteriormente si è pensato di utilizzare questo "stratagemma":

pagina web con immagine statica in primo piano
[fino al completamento del caricamento in cache del primo video]
poi riproduzione del video 1
poi altra immagine statica (non super indispensabile ma già che ci siamo meglio metterla!)
[fino al completamento del caricamento in cache del secondo video, che potrebbe essere avvenuto anche durante la riproduzione del primo video]
poi riproduzione in loop del secondo video

tutto questo deve precedere il caricamento di tutte le parti grafiche e testuali del sito.
poi alla fine del primo video dovrebbe apparire il tutto!

per permettere di rimanere sul video... dovrei impedire lo scroll (direi "quasi" naturale visto che non vi è nulla di renderizzato nella pagina da mostrare...)

ecco... se vi è capitato qualcosa del genere o avete qualche info...
datemi un cenno! così mi studio il tutto!
son qui per imparare!

grazie!!!!

[radeon_snorky]

un helpino?

[rewrew999]

Una cosa del genere? http://codepen.io/rewrew/full/xVgmRx/
(Per vedere il codice premi "Change View" > "Editor View")

L'immagine statica la puoi indicare con l'attributo "poster" dell'elemento "video". Ovviamente devi ridurre al minimo il peso dell'immagine, altrimenti sei punto a capo
Potresti, ad esempio, usare il primo frame del video, applicargli un blur massiccio e salvarla come jpeg a livello massimo di compressione.

Gli attributi "autoplay" e "loop" ti permettono, rispettivamente, di mandare il primo video in play automaticamente e il secondo in loop infinito.

Lo javascript si limita ad intercettare l'evento "ended" lanciato dal primo video quando termina l'esecuzione. Quando scatta l'evento nasconde il primo video, mostra il secondo (aggiungendo e rimuovendo la classe "hide") e ne avvia la riproduzione.


Per bloccare lo scroll va impostato via css l'overflow del contenitore a hidden

overflow: hidden;

Mentre al contenitore dei video in overlay imposti l'overflow a piacere (scroll o hidden a seconda del risultato che vuoi ottenere)

[radeon_snorky]

Originariamente inviato da rewrew999

Una cosa del genere? http://codepen.io/rewrew/full/xVgmRx/

Grazie!!!
l'ho sistemato con la mia robetta e "dovrebbe" funzionare!

il fatto è che il sito è fatto con wordpress e... ha i suoi pro e contro....

per l'overflow adesso vedo cosa inventarmi!

un consiglio:
ho pensato di implementare fullpage.js per "inscatolare" le sezioni del sito, peccato che il video non è molto accattivante ridimensionato su schermi piccoli!
è fattibile fissare l'altezza "al 100%" e far tagliare il video ai lati dello schermo (display degli smartphone il portrait...)
se non riesco apro un'altra discussione! son niubbo eh!

[rewrew999]

Originariamente inviato da radeon_snorky

Grazie!!!
l'ho sistemato con la mia robetta e "dovrebbe" funzionare!

il fatto è che il sito è fatto con wordpress e... ha i suoi pro e contro....

per l'overflow adesso vedo cosa inventarmi!

un consiglio:
ho pensato di implementare fullpage.js per "inscatolare" le sezioni del sito, peccato che il video non è molto accattivante ridimensionato su schermi piccoli!
è fattibile fissare l'altezza "al 100%" e far tagliare il video ai lati dello schermo (display degli smartphone il portrait...)
se non riesco apro un'altra discussione! son niubbo eh!

http://codepen.io/rewrew/pen/wGgLJG

Dovresti impostare solo una delle due dimensioni al 100% e lasciare l'altra su auto. Così viene garantito l'aspect ratio corretto e che una delle due dimensioni sia al 100%.

Per far funzionare il sistema sia in landscape che in portrait puoi utilizzare i css media queries (https://developer.mozilla.org/en-US/..._media_queries) per applicare uno stile diverso a seconda dell'aspect ratio della finestra (io ho messo 16/9 perché i video sono in 16:9) ("@media screen and (min-aspect-ratio: 16/9)")

left: 50%;
transform: translateX(-50%);

e

top: 50%;
transform: translateY(-50%);

Servono per centrare il video rispetto al contenitore (".overlay-container")