reproducir - Html5 video de pantalla completa

reproductor de video html5 responsive

Question

¿Hay alguna manera de hacer esto? Quiero reproducir video en pantalla completa. Sin navegador width:100%; height:100%; ajuste width:100%; height:100%; width:100%; height:100%; mantener el navegador visible todavía

Answer 1

De 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;
}

Answer 2

Esta es una forma muy simple (3 líneas de código) utilizando la API de pantalla completa y el método RequestFullscreen que utilicé, que es compatible con todos los navegadores populares:

var elem = document.getElementsByTagName(''video'')[0];
var fullscreen = elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
fullscreen.call(elem); // bind the ''this'' from the video object and instantiate the correct fullscreen method.

Para compatibilidad con el navegador: MDN y puedo usar

Answer 3

No, no hay manera de hacer esto todavía. Me gustaría que agregaran un futuro como este en los navegadores.

EDITAR:

Ahora hay una API de pantalla completa para la web . Puede requestFullscreen Pantalla completa en un elemento de Video o Lienzo para pedirle al usuario que le otorgue permisos y que esté a pantalla completa.

Consideremos este elemento:

<video controls id="myvideo">
<source src="somevideo.webm"></source>
<source src="somevideo.mp4"></source>
</video>

Podemos poner ese video en modo de pantalla completa con un script como este:

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

Documentación completa

Answer 4

Puede usar el reproductor de video html5 que tiene la opción de reproducción a pantalla completa. Este es un muy buen reproductor html5 para echar un vistazo.
http://sublimevideo.net/

Answer 5

Puedes hacerlo con jQuery.

Tengo mi video y controles en su propio <div> así:

<div id="videoPlayer" style="width:520px; -webkit-border-radius:10px; height:420px; background-color:white; position:relative; float:left; left:25px; top:55px;" align="center">
<video controls width="500" height="400" style="background-color:black; margin-top:10px; -webkit-border-radius:10px;">
<source src="videos/gin.mp4" type="video/mp4" />
</video>
<script>
video.removeAttribute(''controls'');
</script>
<div id="vidControls" style="position:relative; width:100%; height:50px; background-color:white; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; padding-top:10px; padding-bottom:10px;">
<table width="100%" height="100%" border="0">
<tr>
<td width="100%" align="center" valign="middle" colspan="4"><input class="vidPos" type="range" value="0" step="0.1" style="width:500px;" /></td>
</tr>
<tr>
<td width="100%" align="center" valign="middle"><a href="javascript:;" class="playVid">Play</a></td>
<td width="100%" align="center" valign="middle"><a href="javascript:;" class="vol">Vol</a></td>
<td width="100%" align="left" valign="middle"><p class="timer"><strong>0:00</strong> / 0:00</p></td>
<td width="100%" align="center" valign="middle"><a href="javascript:;" class="fullScreen">Full</a></td>
</tr>
</table>
</div>
</div>

Y luego mi jQuery para la clase .fullscreen es:

var fullscreen = 0;
$(".fullscreen").click(function(){
if(fullscreen == 0){
fullscreen = 1;
$("video").appendTo(''body'');
$("#vidControls").appendTo(''body'');
$("video").css(''position'', ''absolute'').css(''width'', ''100%'').css(''height'', ''90%'').css(''margin'', 0).css(''margin-top'', ''5%'').css(''top'', ''0'').css(''left'', ''0'').css(''float'', ''left'').css(''z-index'', 600);
$("#vidControls").css(''position'', ''absolute'').css(''bottom'', ''5%'').css(''width'', ''90%'').css(''backgroundColor'', ''rgba(150, 150, 150, 0.5)'').css(''float'', ''none'').css(''left'', ''5%'').css(''z-index'', 700).css(''-webkit-border-radius'', ''10px'');
}
else
{
fullscreen = 0;
$("video").appendTo(''#videoPlayer'');
$("#vidControls").appendTo(''#videoPlayer'');
//change <video> css back to normal
//change "#vidControls" css back to normal
}
});

Se necesita un poco de limpieza ya que todavía estoy trabajando en ello, pero eso debería funcionar para la mayoría de los navegadores por lo que puedo ver.

¡Espero eso ayude!

Answer 6

Todo el granizo HTML5 _ / / _

var videoElement = document.getElementById(''videoId'');
videoElement.webkitRequestFullScreen();

Answer 7

 if (vi_video[0].exitFullScreen) vi_video[0].exitFullScreen();
else if (vi_video[0].webkitExitFullScreen) vi_video[0].webkitExitFullScreen();
else if (vi_video[0].mozExitFullScreen) vi_video[0].mozExitFullScreen();
else if (vi_video[0].oExitFullScreen) vi_video[0].oExitFullScreen();
else if (vi_video[0].msExitFullScreen) vi_video[0].msExitFullScreen();
else { vi_video.parent().append(vi_video.remove()); }