C'è un modo per rendere il video HTML5 a schermo intero?
https://stackoverflow.com/questions/1055214
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Esiste un modo per riprodurre un video a schermo intero utilizzando il tag HTML <video>?
E se ciò non fosse possibile, qualcuno sa se c'è una ragione per questa decisione?
Soluzione
HTML 5 non offre alcun modo per realizzare un video a schermo intero, ma le Specifiche a schermo intero parallele forniscono il metodo requestFullScreen che consente di rendere a schermo intero elementi arbitrari (inclusi <video> elementi).
Ha supporto sperimentale in numerosi browser .
Risposta originale:
Dalle Specifiche HTML5 (at il tempo di scrivere: giugno '09):
Gli interpreti non devono fornire a API pubblica per mostrare i video a schermo intero. Una sceneggiatura, combinata con un file video accuratamente realizzato, potrebbe indurre l'utente a pensare a finestra di dialogo modale di sistema era stata mostrata, e richiede all'utente una password. Esiste anche il pericolo di & Quot; mero & Quot; fastidio, con l'avvio delle pagine video a schermo intero quando i collegamenti sono cliccato o pagine navigate. Anziché, caratteristiche dell'interfaccia specifiche dell'utente-agente può essere fornito per consentire facilmente il l'utente per ottenere una riproduzione a schermo intero modalità.
I browser possono fornire un'interfaccia utente, ma non dovrebbero fornirne una programmabile.
Nota che l'avviso sopra è stato rimosso dalla specifica.
Altri suggerimenti
La maggior parte delle risposte qui sono obsolete.
Ora è possibile portare qualsiasi elemento a schermo intero usando 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 dello schermo intero API.
Il supporto del browser corrente è:
- Chrome 15+
- Firefox 10+
- Safari 5.1+
Tieni presente che molti browser per dispositivi mobili non sembrano supportare ancora l'opzione a schermo intero .
Safari lo supporta tramite webkitEnterFullscreen.
Chrome dovrebbe supportarlo dal momento che è anche WebKit, ma con errori.
Chris Blizzard di Firefox ha dichiarato che uscirà con la propria versione di schermo intero che consentirà a qualsiasi elemento di passare a schermo intero. per esempio. 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 richiamato sul tag video ele & # 173; ad esempio, su & # 173; schermo il primo tag video sulla pagina usa:
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Avviso: questa è una risposta obsoleta e non più pertinente.
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 il 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 :)
Vedi Ya!
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 video in un ambiente completamente coinvolgente.
Per far funzionare il pulsante a schermo intero è necessario impostare un altro listener di eventi che chiamerà la funzione requestFullScreen() quando si fa clic sul pulsante. Per assicurarti che funzioni su tutti i browser supportati, dovrai anche verificare se mozRequestFullScreen è disponibile e fallback alle versioni con prefisso del fornitore (webkitRequestFullscreen e <=>) se non lo è.
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 / it-IT / docs / Web / Guida / API / DOM / Using_full_screen_mode Riferimento: - http://blog.teamtreehouse.com/building-custom- controlli-per-HTML5 video
Un modo programmabile per eseguire lo schermo intero funziona ora sia in Firefox che in Chrome (nelle ultime versioni). La buona notizia è che qui è stata redatta una specifica:
http://dvcs.w3.org/hg/ fullscreen / prime file / tip / overview.html
Per ora dovrai comunque gestire i prefissi dei fornitori, ma tutti i dettagli dell'implementazione vengono monitorati nel sito MDN:
Dal 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;
}
Puoi modificare la larghezza e l'altezza al 100%, ma non coprirà 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 si trovano 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 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, fare clic con il tasto destro del mouse sul video e selezionare "schermo intero".
Gli ultimi nightly di Webkit supportano anche video HTML5 a schermo intero, prova il Sublime player con l'ultimo nightly e tieni premuto Cmd / Ctrl mentre selezioni l'opzione a schermo intero.
Suppongo che Chrome / Opera supporterà anche qualcosa del genere. Speriamo che IE9 supporterà anche video HTML5 a schermo intero.
Questo è supportato in WebKit tramite webkitEnterFullscreen .
Una soluzione alternativa sarebbe quella di dover semplicemente browser fornire questa opzione nel menu contestuale. Non è necessario 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();
}
}
}
Sì. Bene, ciò che accade con il video HTML5 è che hai appena messo il tag <video> 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 il & Quot; art & Quot; alcuni sviluppatori che giocano 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'immissione manuale a schermo intero fino a f11)
2) visualizza temporaneamente un piccolo banner che indica che è stata attivata la modalità video a schermo intero (dal browser)
3) blocca 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 da Chrome 11.0.686.0 canale di sviluppo 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 fatto per me) puoi impostare due video. Uno per le dimensioni normali e un altro per le dimensioni a schermo intero. Quando vuoi passare a schermo intero
- Usa javascript per impostare l'attributo 'src' del video a schermo intero sull'attributo 'src' dei video più piccoli
- Imposta video.currentTime sul video a schermo intero in modo che sia uguale al video piccolo.
- Usa css 'display: none' per nascondere il piccolo video e visualizzarne uno grande con via 'position: absolute' e 'z-index: 1000' o qualcosa di veramente alto.
