2013-03-05 26 views
6

Dopo un'enorme ricerca non ho ancora trovato risposta alla mia domanda. Volevo raggiungere il mio obiettivo con FullScreenAPI ma non è supportato in nessun browser mobile (tranne Firefox 19 e Blackberry, ma ho bisogno di una soluzione cross-browser). Here's the source. Ho anche testato FullScreenAPI su browser Android nativo e Chrome mobile con funzioni a schermo intero appropriatamente prefissate. Ogni funzione era di tipo undefined.HTML5 video a schermo intero su browser mobile (Android)

Un altro approccio era il protocollo rtsp che di solito è gestito da un giocatore esterno. Here è il tipo che ipotizza che m.youtube.com utilizzi quella soluzione - penso che non sia vero (forse la risposta è obsoleta). Youtube utilizza lo schermo intero del video nativo. Sul Chrome mobile quando tocchi il pulsante di riproduzione, il film diventa immediatamente a schermo intero.

Anche se, ogni fonte mi googled mi dice che a schermo intero nativa non è possibile sul browser Android, ancora elemento video HTML5 con i suoi controlli nativi ci dà un pulsante a schermo intero che funziona perfettamente là fuori.

Dal momento che non voglio che i controlli nativi, qualcuno può condividere qualsiasi soluzione ingegnosa per How to trigger HTML5 video fullscreen button'sevent?

risposta

2

È possibile creare un popup al 100% di larghezza/altezza con un pulsante di chiusura in assoluto su di esso riproducendo il video HTML5.

Vecchio, trucco semplice e sporco ... Ma funziona

+0

Sì, ho dimenticato di condividere questa possibilità nella domanda. Sfortunatamente non è una soluzione per me :(Devo attivare quel molto fullscreen dal pulsante nativo (o, se non è possibile, devo essere sicuro al 100%). – matewka

0

Prova video.webkitEnterFullscreen() in un gestore di eventi interattivi utente (es: clicca)

0

tutto ciò che serve per lavorare su "webkitbeginfullscreen" e eventi "webkitendfullscreen" per i dispositivi mobili, i think.it sarà

<!doctype html> 
<html> 
<head> 
<title>video</title> 
<script type="text/javascript"> 
function videoControl() { 
    var myVideo = document.getElementById('myVideo'); 
    myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false); 
    myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false); 
} 

function enteringFullscreen() { 
    alert("entering full-screen mode"); 
} 

function exitingFullscreen() { 
    alert("exiting full-screen mode"); 
} 
</script> 
</head> 
<body onload="videoControl()"> 
<div id="videoContainer"> 
<video id="myVideo" src="myVideo.m4v" autoplay controls> 
</video> 
</div> 
</body> 
</html> 
-1

Ecco quello che io uso che dovrebbe più o meno lavoro in tutto il mondo:

function toggleFullScreen() { 
    var doc = window.document; 
    var elem = doc.body; //the element you want to make fullscreen 

    var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen; 
    var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen; 

    if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) { 
     requestFullScreen.call(doc.body); 
    } 
    else { 
    cancelFullScreen.call(doc); 
    } 
} 
+0

Questo rende la pagina web a schermo intero, non solo l'elemento o video. –

Problemi correlati