video come sfondo del sito? HTML 5

Desidero utilizzare un video come sfondo anziché un'immagine che si estende automaticamente a tutto lo schermo (sfondo).video come sfondo del sito? HTML 5

Vorrei anche ruotare video e immagini .. in modo che ci sia un video/immagine casuale visualizzato in qualsiasi ordine.

Sarebbe anche bello sapere come ritardare la riproduzione del video, in modo che il video venga riprodotto solo una volta 30 secondi dopo il caricamento del sito.

thx!

fonte

2010-09-27 Roland

Si prega di considerare che molti visitatori odieranno questa funzione (blocco attivo con adblock). Inoltre, i video possono ferire l'utente in due casi: sulle connessioni a consumo e durante la visualizzazione della pagina in una sessione desktop remota che può diventare inutilizzabile se la larghezza di banda del caricamento è bassa. –

primo luogo, il codice HTML simile a questo:

<video id="awesome_video" src="first_video.mp4" autoplay />

In secondo luogo, il codice JavaScript sarà simile a questa:

<script type="text/javascript"> 
    var index = 1, 
     playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'], 
     video = document.getElementById('awesome_video'); 

    video.addEventListener('ended', rotate_video, false); 

    function rotate_video() { 
    video.setAttribute('src', playlist[index]); 
    video.load(); 
    index++; 
    if (index >= playlist.length) { index = 0; } 
    } 
</script>

E, ultimo ma non meno importante, il vostro CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Questo creerà un elemento video sulla tua pagina che inizia immediatamente a riprodurre il primo video, quindi itera s attraverso la playlist definita dalla variabile JavaScript. Il tuo chilometraggio con il CSS può variare a seconda del CSS per il resto del sito, ma il 100% di larghezza/altezza dovrebbe farlo su una pagina di base.

fonte

2010-09-27 03:09:52

thx, ma il codice a schermo intero non funziona davvero. mostra solo il video nella sua dimensione originale nell'angolo in alto a sinistra e fa anche sparire il resto del testo sul sito! – Roland

Beh, se si desidera a schermo intero, il resto del testo sul sito ovviamente scomparirà.Per quanto riguarda la modalità a schermo intero non funziona, prova a impostare l'altezza e la larghezza dell'elemento video sulla dimensione della vista. Ad esempio, 'video.width = 1024; video.height = 768; ' –

Dai un'occhiata alla mia risposta in basso. Prende in considerazione tutte le schermate :) – sydlawrence

mi potrebbe avere una soluzione per il video come sfondo, si estendeva al browser-larghezza o l'altezza, (ma il video sarà ancora mantenere le proporzioni, non potrebbe trovare una soluzione per questo ancora.):

Put il video subito dopo il tag del corpo con style="width:100%;". destra postfazioni, mettere un "bodydummy" -tag:

<body> 
<video id="bgVideo" autoplay poster="videos/poster.png"> 
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/> 
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/> 
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>  
</video> 

<img id="bgImg" src="videos/poster.png" /> 

<!-- This image stretches exactly to the browser width/height and lies behind the video--> 

<div id="bodyDummy">

mettere tutti i vostri contenuti all'interno del bodydummy -div e mettere le z-indici correttamente in CSS in questo modo:

#bgImg{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
} 

#bgVideo{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    z-index: 2; 
    width: 100%; 
    height: 100%; 
} 

#bodyDummy{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
}

speranza che potevo Aiuto. Fammi sapere quando è possibile trovare una soluzione che il video non sia non mantenere le proporzioni, quindi potrebbe riempire l'intera finestra del browser in modo da non dover mettere un bgimage.

fonte

2011-03-01 13:24:05 moritz

Date un'occhiata al mio jQuery videoBG plug

http://syddev.com/jquery.videoBG/

fare qualsiasi video HTML5 un sito di fondo ... ha un ripiego immagine per i browser che non supportano HTML5

Veramente facile da utilizzare

Fammi sapere se hai bisogno di aiuto.

fonte

2011-03-15 04:06:41 sydlawrence

Grazie, Sydlawrence! Ho iniziato in un libro HTML5 (Lawson e Sharp), poi sono andato al web ... ho cercato ovunque "video background html5" e ho letto un sacco di informazioni non proprio corrette. La tua soluzione ha funzionato come un fascino. –

@sydlawrence che è eccellente! Ho implementato la tua soluzione. Tuttavia, ho un problema con l'integrazione e il manifesto si illumina per un secondo prima che il video venga caricato - come può essere fatto in modo che il poster si carichi solo se non c'è compatibilità con il video html5? – willdanceforfun

hi syd, il tuo plugin funziona alla grande, ma non sembra funzionare su Firefox? com'è possibile? Ovunque altro funziona – woony

video come sfondo del sito? HTML 5

risposta

Problemi correlati