C'è un modo per rendere il video HTML5 a schermo intero?

Esiste un modo per riprodurre un video a schermo intero utilizzando il <video>tag HTML5 ?

E se ciò non fosse possibile, qualcuno sa se esiste una ragione per questa decisione?

HTML 5 non fornisce alcun modo per creare un video a schermo intero, ma la specifica parallela a schermo intero fornisce il requestFullScreenmetodo che consente di rendere a schermo intero elementi arbitrari (inclusi gli <video>elementi).

Ha il supporto sperimentale in diversi browser .

Risposta originale:

Dalle specifiche HTML5 (al momento della scrittura: giugno '09):

Gli interpreti non devono fornire un'API pubblica per far sì che i video vengano mostrati a schermo intero. Uno script, combinato con un file video accuratamente elaborato, potrebbe indurre l'utente a pensare che fosse stata mostrata una finestra di dialogo modale di sistema e richiedere all'utente una password. Esiste anche il pericolo di "semplice" fastidio, con le pagine che lanciano video a schermo intero quando si fa clic sui collegamenti o si navigano le pagine. Al contrario, possono essere fornite funzionalità di interfaccia specifiche per agente utente per consentire all'utente di ottenere facilmente una modalità di riproduzione a schermo intero.

I browser possono fornire un'interfaccia utente, ma non dovrebbero fornirne una programmabile.

Si noti che l'avviso sopra è stato rimosso dalle specifiche.

La maggior parte delle risposte qui sono obsolete.

Ora è possibile portare qualsiasi elemento a schermo intero utilizzando l' API a schermo intero , anche se è ancora un bel casino perché non puoi semplicemente chiamare div.requestFullScreen()in tutti i browser, ma devi usare metodi prefissati specifici del browser.

Ho creato un semplice wrapper screenfull.js che semplifica l'utilizzo dell'API a schermo intero.

L'attuale supporto del browser è:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

Tieni presente che molti browser per dispositivi mobili non sembrano ancora supportare un'opzione a schermo intero .

Safari lo supporta attraverso webkitEnterFullscreen.

Chrome dovrebbe supportarlo dal momento che è anche WebKit, ma errori.

Chris Blizzard di Firefox ha dichiarato che uscirà con la propria versione a schermo intero che consentirà a qualsiasi elemento di passare a schermo intero. ad es. tela

Philip Jagenstedt di Opera afferma che lo supporteranno in una versione successiva.

Sì, le specifiche del video HTML5 dicono di non supportare lo schermo intero, ma poiché gli utenti lo desiderano e ogni browser lo supporterà, le specifiche cambieranno.

webkitEnterFullScreen();

Questo deve essere chiamato sull'elemento tag video, ad esempio, per utilizzare a schermo intero il primo tag video sulla pagina:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Avviso: questa è una risposta obsoleta e non è più pertinente.

Molti browser Web moderni hanno implementato un'API FullScreen che consente di focalizzare lo schermo intero su determinati elementi HTML. Questo è davvero ottimo per visualizzare contenuti multimediali interattivi come i video in un ambiente completamente coinvolgente.

Per far funzionare il pulsante a schermo intero è necessario impostare un altro listener di eventi che chiamerà la requestFullScreen()funzione quando si fa clic sul pulsante. Per assicurarti che funzioni su tutti i browser supportati, dovrai anche verificare se requestFullScreen()è disponibile e ripristinare le versioni con prefisso del fornitore ( mozRequestFullScreene webkitRequestFullscreen) in caso contrario.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Riferimento: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Riferimento: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -Video

Penso che se vogliamo avere un modo aperto per visualizzare i video nei nostri browser senza plug-in di origine chiusa (e tutte le violazioni di sicurezza che derivano dalla cronologia del plug-in flash ...). Il tag deve trovare un modo per attivare lo schermo intero .. Potremmo gestirlo come fa Flash: per fare lo schermo intero, deve essere attivato con un clic sinistro con il mouse e nient'altro, intendo dire che ActionScript non può essere avviato a schermo intero al caricamento di un flash con l'esempio.

Spero di essere stato abbastanza chiaro: dopo tutto, sono solo uno studente di informatica francese, non un poeta inglese :)

Ci vediamo!

Da CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Un modo programmabile per eseguire lo schermo intero funziona ora sia in Firefox che in Chrome (nelle loro ultime versioni). La buona notizia è che qui è stata redatta una specifica:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Per ora dovrai comunque gestire i prefissi dei fornitori, ma tutti i dettagli dell'implementazione vengono monitorati nel sito MDN:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Puoi modificare la larghezza e l'altezza in modo che siano al 100%, ma non copriranno il browser Chrome o la shell del sistema operativo.

La decisione di progettazione è perché l'HTML vive all'interno della finestra del browser. I plug-in Flash non sono all'interno della finestra, quindi possono passare a schermo intero.

Questo ha senso, altrimenti potresti creare tag img che coprivano la shell o creare tag h1 in modo che l'intero schermo fosse una lettera.

No, non è possibile avere video a schermo intero in html 5. Se vuoi conoscere i motivi, sei fortunato perché l'argomento battaglia per lo schermo intero è combattuto in questo momento. Vedi la mailing list WHATWG e cerca la parola "video". Spero personalmente che forniscano l'API a schermo intero in HTML 5.

Firefox 3.6 ha un'opzione a schermo intero per i video HTML5, fai clic con il pulsante destro del mouse sul video e seleziona "schermo intero".

Gli ultimi nightly di Webkit supportano anche video HTML5 a schermo intero, prova il lettore Sublime con l'ultimo notturno e tieni premuto Cmd / Ctrl mentre selezioni l'opzione a schermo intero.

Immagino che anche Chrome / Opera supporteranno qualcosa del genere. Eventualmente IE9 supporterà anche video HTML5 a schermo intero.

Questo è supportato in WebKit tramite webkitEnterFullscreen .

Una soluzione alternativa sarebbe quella di browser semplicemente fornire questa opzione nel menu contestuale. Non c'è bisogno di avere Javascript per farlo, anche se ho potuto vedere quando sarebbe stato utile.

Nel frattempo una soluzione alternativa sarebbe semplicemente quella di massimizzare la finestra (Javascript può fornire le dimensioni dello schermo) e quindi massimizzare il video al suo interno. Provalo e poi vedi semplicemente se i risultati sono accettabili per i tuoi utenti.

Il video HTML 5 passa a schermo intero nell'ultima build notturna di Safari, anche se non sono sicuro di come sia tecnicamente realizzato.

La soluzione completa:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Se hai la possibilità di definire il tuo sito come app Web progressiva (PWA), allora c'è anche un'opzione da usare display: "fullscreen"in manifest.json . Questo funzionerà solo se l'utente aggiunge / installa la tua webapp alla schermata principale e la apre da lì.

Sì. Bene, ciò che accade con il video HTML5 è che hai appena messo il <video>tag e il browser fornirà la sua interfaccia utente e quindi la possibilità di visualizzare a schermo intero. Rende davvero la vita molto migliore a noi utenti di non dover vedere "l'arte" che alcuni sviluppatori che potrebbero giocare con Flash potrebbero fare :) Aggiunge anche coerenza alla piattaforma, il che è bello.

è semplice, tutti i problemi possono essere risolti in questo modo,

1) avere la fuga ti porta sempre fuori dalla modalità a schermo intero (questo non si applica all'ingresso manuale a schermo intero attraverso f11)

2) visualizzare temporaneamente un piccolo banner che indica che è stata attivata la modalità video a schermo intero (dal browser)

3) bloccare l'azione a schermo intero per impostazione predefinita, proprio come è stato fatto per i pop-up e il database locale in html5 e posizione API e ecc, ecc.

non vedo alcun problema con questo design. qualcuno pensa che mi sia perso qualcosa?

A partire dal canale di sviluppo di Chrome 11.0.686.0 Chrome ora ha video a schermo intero.

Puoi farlo se dici all'utente di premere F11 (schermo intero per molti browser) e metti video su tutto il corpo della pagina.

Se nessuna di queste risposte non funziona (come non hanno funzionato per me) è possibile impostare due video. Uno per le dimensioni normali e un altro per le dimensioni a schermo intero. Quando vuoi passare a schermo intero

1. Usa JavaScript per impostare l'attributo 'src' del video a schermo intero sull'attributo 'src' dei video più piccoli
2. Imposta video.currentTime sul video a schermo intero in modo che sia uguale al video piccolo.
3. Usa css 'display: none' per nascondere il piccolo video e visualizzare quello grande con le 'position: absolute' e 'z-index: 1000' o qualcosa di veramente alto.