Uscita a schermo intero con il tag HTML5

Sto cercando di far uscire il video a schermo intero alla fine del video, ma non lo farà. Ho cercato e trovato modi per farlo, ma per la vita di me non riesco a farlo funzionare. Sto testando l'ultima versione di Chrome (15) e iOS 5 su iPad2. Ecco il codice che sto utilizzando:Uscita a schermo intero con il tag HTML5

<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#myVideoTag").on('ended', function(){ 
    webkitExitFullScreen(); 
    }); 
}); 

</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>854x480</title> 
</head> 
<body> 
<video width="854" height="480" 
     src="video/854x480-Template_1.mp4" 
     poster="images/poster.jpg" 
     id="myVideoTag" 
     type="video/mp4" 
     preload="auto" 
     autobuffer 
     controls> 
    <p>Requires HTML5 capable browser.</p> 
</video> 

</body> 
</html>

Qualsiasi aiuto sarà apprezzato.

fonte

2011-11-17 ShockTower

webkitExitFullScreen è un metodo dell'elemento video, quindi deve essere chiamato in questo modo:

videoElement.webkitExitFullscreen(); 
//or 
$("#myVideoTag")[0].webkitExitFullscreen(); 
//or, without needing jQuery 
document.getElementsById('myVideoTag').webkitExitFullscreen();

Poiché è all'interno di un gestore di eventi, this sarà il video che ended, così:

$("#myVideoTag").on('ended', function(){ 
    this.webkitExitFullscreen(); 
});

Diventa un po 'più complicato perché webkitExitFullscreen funziona solo in fronte basata su Webkit sers (Safari, Chrome, Opera), così puoi saperne di più sul suo uso corretto su MDN

fonte

2011-11-18 23:05:29 cbaigorri

Grazie cbaigorri. Era così! Grazie per l'aiuto. – ShockTower

Non sembra funzionare su iOS7 – Dejan

Attenzione! Il nome della funzione è 'webkitExitFullscreen' * not *' webkitExitFullScreen' (nota la "s" minuscola) –

Grazie cbaigorri, ha funzionato meravigliosamente per usare .webkitExitFullscreen();

ho usato il seguente per uscire fullscreen quando il video è finito di giocare:

<script type="text/javascript"> 
function CloseVideo() { 
    document.getElementsByTagName('video')[0].webkitExitFullscreen(); 
} 
</script> 

<video controls onended=CloseVideo() > 
    <source src="video.mp4" type="video/mp4"> 
</video>

fonte

2013-06-28 07:29:43

Non funziona per IE. – Someone

So che questo è già risposto, ma qui è il piccolo frammento di codice ho finito per usare per tutti i browser per chiudere il video a schermo intero dopo finisce.

Opere su Chrome, IE11, Firefox finora:

$("#myVideoTag").on('ended', function(){ 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); // Standard 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); // Blink 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); // Gecko 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); // Old IE 
    } 
});

si possono anche trovare l'elemento corrente a schermo intero (se del caso) come:

var fullscreenElement = document.fullscreenElement || 
    document.mozFullScreenElement || document.webkitFullscreenElement;

Fonte: https://www.sitepoint.com/use-html5-full-screen-api/

Ho solo pensato di aggiungere la risposta in quanto questa è stata la prima domanda che ho trovato quando cercavo una soluzione a questo.

fonte

2017-07-31 23:52:15 elzaer

Uscita a schermo intero con il tag HTML5

risposta

Problemi correlati