[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 :asd:
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]

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]

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/docs/Web/CSS/Media_Queries/Using_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")