Come è possibile visualizzare HTML5 <video> come sfondo a tutto schermo del sito Web? Simile a questo sito Flash demo ...Puoi visualizzare HTML5 <video> come sfondo a schermo intero?
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Usa position:fixed sul video, impostarlo su 100% larghezza/altezza, e mettere un negativo z-index su di esso in modo che appaia dietro ogni cosa.
Se si guarda VideoJS, i controlli sono solo elementi HTML che si trovano in cima al video, usando z-index per assicurarsi che siano sopra.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Aggiungere fonti WebM e ogg per supportare più browser)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
E funzionerà nella maggior parte dei browser HTML5, ma probabilmente non iPhone/iPad , dove il video deve essere attivato, e non gli piacciono gli elementi su di esso.
Solo un commento su questo: ho utilizzato il video HTML5 per uno sfondo a schermo intero e funziona bene, ma assicurati di utilizzare Altezza: 100% e larghezza: auto o viceversa per garantire mantieni le proporzioni.
Per quanto riguarda gli Ipad, è possibile (apparentemente) fare ciò, nascondendo e forzando l'evento click per sparare, e avendo la funzione dell'evento click, avviare Load/Play().
P.s - questo non dovrebbe richiedere alcun plugin e può essere fatto con JS minimo - Se si sta prendendo di mira qualsiasi dispositivo mobile (presumibilmente si potrebbe essere ..) stare lontano da qualsiasi quadro di questo tipo è la via da seguire.
Vedere http://www.sklinar.co.uk/toe/ in Chrome per un esempio funzionante. –
Potrei essere un po 'in ritardo per rispondere a questo, ma questo sarà utile per le nuove persone in cerca di questa risposta.
Le risposte sopra sono buone, ma per avere uno sfondo video perfetto è necessario controllare le proporzioni in quanto il video potrebbe essere tagliato o la tela intorno si deforma quando si ridimensiona lo schermo o lo si utilizza su schermi di dimensioni diverse.
Mi sono imbattuto in questo problema non molto tempo fa e ho trovato la soluzione utilizzando le query multimediali.
Ecco un tutorial che ho scritto su come creare un Fullscreen Video Background with only CSS
vorrei aggiungere il codice qui pure:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
Spero che lo trovi utile.
Questa è una grande risposta per me, non so che la gente non voti su questa risposta. Le persone che votano, puoi dare qualche spiegazione perché? – zt1983811
http://stackoverflow.com/questions/1055214/is-there-a--to-make-html5-video-fullscreen Puoi effettuare il check-in lì – saturngod
Ho visto quel post già, che sembra essere più preoccupato con la riproduzione di video al di fuori della finestra del browser a schermo intero, sto cercando un video di re-ridimensionabile nel browser.Ho pensato che ci potrebbe essere più là fuori su questo anche se questo link sembra un po 'più promettente – Yammi
Non sto postando questo come risposta, perché ho solo prove empiriche, ma test in Chrome e Firefox (Ubuntu 10.04) suggerisce che questo non è possibile. Sono, tuttavia, affascinato di essere smentito. +1 e recitato, per ogni evenienza. –