Solicitar pantalla completa HTML5 Video onPlay

Estoy usando el siguiente código para activar la pantalla completa cuando un usuario hace clic en el botón de reproducción en un elemento :

 var video = $("#video"); video.on('play', function(e){ if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } }); 

Pero no pasa nada cuando hago clic en el botón de reproducción.

¿Alguna idea de por qué?

EDITAR: Aquí está mi código HTML:

  

Hay un par de cosas sucediendo aquí:

Primero, en su código, el video es un objeto jQuery, no el elemento de video real. Para un objeto jQuery, puedes referenciarlo así:

 var actualVideo = video[0]; // (assuming '#video' actually exists) 

Segundo, por seguridad y buena experiencia de usuario, los navegadores solo le permitirán activar la pantalla completa dentro de un evento activado por el usuario, como un “clic”. No puedes tener todas las páginas web que van a la pantalla completa tan pronto como las visitas, y puedes hacer que un video comience a reproducirse automáticamente, lo que violaría esa regla.

Por lo tanto, una solución alternativa sería solicitar pantalla completa en un evento de clic, como este:

 var video = $("#video"); video.on('click', function(e){ var vid = video[0]; vid.play(); if (vid.requestFullscreen) { vid.requestFullscreen(); } else if (vid.mozRequestFullScreen) { vid.mozRequestFullScreen(); } else if (vid.webkitRequestFullscreen) { vid.webkitRequestFullscreen(); } }); 

Lo ideal es que desees construir una interfaz de usuario más completa, pero esto debería darte una idea general.

Una forma menos detallada de alternar la pantalla completa combinando respuestas de esta y otras preguntas .

p representa el objeto DOM del elemento de video , y window.isFs es solo una variable aleatoria para almacenar el estado actual de pantalla completa.

Si su player es un objeto jQuery, use el elemento DOM subyacente con var p = player.get(0) .

Esto debería manejar todos los sabores del navegador: navegadores basados ​​en webkit, firefox, opera y basados ​​en MS.

 var p = document.querySelector('#videoplayer'); if (!window.isFs) { window.isFs = true; var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen; fn_enter.call(p); } else { window.isFs = false; var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen; fn_exit.call(p); }