Salir de pantalla completa con la etiqueta de video HTML5

Estoy intentando que el video salga de pantalla completa al final del video pero no lo hará. Busqué y encontré formas de hacerlo, pero por mi vida no puedo hacer que funcione. Estoy probando en la última versión de Chrome (15) y iOS 5 en el iPad2. Aquí está el código que estoy usando:Salir de pantalla completa con la etiqueta de video 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>

se observará ninguna ayuda.

Fuente

2011-11-17 ShockTower

webkitExitFullScreen es un método del elemento video, así que tiene que ser llamado de esta manera:

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

Ya que es el interior de un controlador de eventos, this será el video que ended, por lo que:

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

Se pone un poco más complicado porque webkitExitFullscreen solo funciona en la ceja basada en webkit sers (Safari, Chrome, Opera), para que pueda aprender más sobre su uso correcto en MDN

Fuente

2011-11-18 23:05:29 cbaigorri

Gracias cbaigorri. ¡Eso fue todo! Gracias por la ayuda. – ShockTower

Parece que no funciona en iOS7 – Dejan

¡Cuidado! El nombre de la función es 'webkitExitFullscreen' * not *' webkitExitFullScreen' (fíjese en la "s" minúscula) –

Gracias cbaigorri, funcionó maravillosamente para usar .webkitExitFullscreen();

que utilizó la siguiente para salir de pantalla completa cuando el vídeo se hace jugando:

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

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

Fuente

2013-06-28 07:29:43

No funciona para IE. – Someone

Sé que esto ya está contestada, pero aquí es el pequeño fragmento de código que terminé usando para todos los navegadores para cerrar el vídeo a pantalla completa después de que termine

Obras en Chrome, IE11, Firefox hasta el momento:

$("#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 
    } 
});

También puede encontrar el actual elemento de pantalla completa (si lo hay) como:

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

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

Solo pensé en agregar la respuesta ya que esta fue la primera pregunta que encontré al buscar una solución a esto.

Fuente

2017-07-31 23:52:15 elzaer

Salir de pantalla completa con la etiqueta de video HTML5

Respuesta

Cuestiones relacionadas