No puedo lograr FullScreen en todos los navegadores (JavScript)

sergiomaidana1989 · #1 (**permalink**) 26/09/2013, 23:40

Hola amigos de ForosdelWeb.
Tengo un problema con un botón para hacer Fullscreen a un video, cuyo reproductor he creado yo mismo en HTML5 con la etiqueta <video>.

He encontrado una función en internet, que te permite hacer esto. Sin embargo, no funciona en todos los navegores. Ésta contiene el código para Chrome y para Mozilla. Pero no funcionan en ambos a la vez, y sí independientemente. Así generan un error.
Incluso, el mismo tutorial lo dice. Que es cuestión de comprobar compatibilidades, y no entiendo como hacer esto.
Mucho de JavaScript y JQuery no entiendo aún. Espero alguien me pueda explicar de manera clara y comcreta cómo hacer que funcioene en todos los navegadores (Chrome, Safari, Mozilla, Opera).

Aquí dejo la función que encontré y probé:

Código Javascript:

Ver original$(document).ready(function(){
    //Funcion que se activa al evento click del button o boton
    $('#completa').click(function(){
             // Codigo para activar pantalla completa en Chrome o Safari 5
             //Seleccionamos el elemnento video del ID video, en este caso la misma etiqueta video
             $('#video')[0].webkitEnterFullScreen();
                 
             /* Codigo para activar pantalla completa en Firefox 8 o proximas actualizaciones
             $('#video')[0].mozRequestFullScreen();
             */
         
    });
});

Desde ya, muchas gracias.

Carlangueitor · #2 (**permalink**) 27/09/2013, 08:04

Aquí hay un muy buen ejemplo (y no usa jQuery): https://developer.mozilla.org/en-US/...ll_screen_mode

PD: La próxima vez postea en el foro correcto.

Saludos

sergiomaidana1989 · #3 (**permalink**) 28/09/2013, 00:13

Sorry.

Y gracias por el link, pero me podrías ayudar un poquito más sobre cómo usar ese ejemplo? Cual ejemplo tengo que usar para mi boton de Fullscreen?

Gracias.

jonni09lo · #4 (**permalink**) 28/09/2013, 07:27

Cita:

Iniciado por sergiomaidana1989

pero me podrías ayudar un poquito más sobre cómo usar ese ejemplo? Cual ejemplo tengo que usar para mi boton de Fullscreen?

Gracias.

En serio?

revisé la página imaginandome una cantidad de ejemplos intendibles o en chino, pero para mi sorpresa hasta tienen un ejemplo live, por favor deja la pereza y no pidas nada hasta que tu mismo avances, la razón de esto es que solo con menos de 5 minutos de búsqueda se puede encontrar paginas como esta ya que si hubieses leido la pagina que muy amablemente te suministraron, sabrias que el fullscreen de HTML5 no funciona en TODOS los navegadores, así que hay que buscar alternativas.

Saludos

sergiomaidana1989 · #5 (**permalink**) 28/09/2013, 09:51

no es pereza. Solamente no entiendo!!

sergiomaidana1989 · #6 (**permalink**) 28/09/2013, 09:58

En lugar de ayudarme un poco más, me tratan de perezoso *_*.

jonni09lo · #7 (**permalink**) 28/09/2013, 10:12

Primero que todo estás posteando en PHP donde temas de javascript son offtopic, por eso te dijeron que no posteaste donde debes, mi pregunta es: Sabes de javascript? a mi entender no, ya que si tienes el código que posteaste al principio con el link que te dio @Carlangueitor bastaba.

Ahora bien yo profundice un poco mas para "ayudarte" dándote un link de una pagina que utiliza lo mismo que te dieron en el primer link, pero con un mayor soporte a otros navegadores. Si esperas a algún samaritano que te diga mira este es el código que debes usar, pues te demoraras mucho, ya que la función principal es darte soluciones a tus preguntas concretas.

No sabias como implementar el fullscreen, perfecto se te da la informacion para que te apoyes Y continúes con la implementacion, pero dices que no entiendes... por eso te digo que si sabes de javascript, ya que si no es así, no importa cuanto te demos códigos tu no seras capaz de avanzar ya que todo lo que harás es copy y paste... y eso querido amigo, no es lo que queremos que hagas

Saludos

sergiomaidana1989 · #8 (**permalink**) 28/09/2013, 10:44

Si, sé que es JavaScript y PHP, pero no sé porque hice Click en PHP. Quise entrar en Ayuda General, pero me equivoqué, mi visión no es muy buena. Quizá eso me traicionó.

Igual, creo que ya lo solucioné. Lo probé en Chrome, Mozilla y Opera. En Safari estoy teniendo problemas con el video, porque ni siquiera me aparece. No sé porque. ¿Alguien sabe por qué puede ser esto?

¿No puedo cambiar el tema éste al foro de JavaScript o Ayuda General? Perdón por mi error. Y gracias al que me pasó el link.

Carlangueitor · #9 (**permalink**) 29/09/2013, 16:45

Tu tema estba en el foro de Ayuda general, debía estar desde un principio en Javascript. Al parecer alguien lo movió al foro de PHP por error. Ya está en el lugar correcto.

Muestra lo que tienes. Probablemente estés usando un formato de video no compatible.

Saludos

sergiomaidana1989 · #10 (**permalink**) 29/09/2013, 17:13

Muchísimas Gracias por eso.

Voy a dejar cómo hice la función del botón FullScreen para ayudar a otros. Bueno, el code JavaScript me quedó así:

Código Javascript:

Ver original/* Función de FullScreen */
function ponerFullscreen() {
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
    }
}

Aquí está mi código HTML del video que les digo que no lo puedo compatibilizar con el navegador Safari, sí con Opera, Chrome y Firefox:

Código HTML:

Ver original<video id="videoIntro">
    <source type="video/mov" src="media/videos/sdmwm_intro.mov"></source>
    <source type="video/mpeg4" src="media/videos/sdmwm_intro.mp4"></source>
    <source type="video/ogg" src="media/videos/sdmwm_intro.ogv"></source>
    <source type="video/webm" src="media/videos/sdmwm_intro.webm"></source>
</video><!-- Cierre Video 'video-intro' -->

Les agradezco a todos los que me dieron una mano. Espero me puedan terminar de ayudar con esto último.
Buscando en internet mi problema, encontré esto:
http://www.longtailvideo.com/support...i-517-windows/
Pero igual, no sé qué onda.

Saludos a todos.

Carlangueitor · #11 (**permalink**) 29/09/2013, 17:28

¿Pero tu video no se ve en fullscreen o de ninguna manera? Estás probando Safari en windows?

sergiomaidana1989 · #12 (**permalink**) 29/09/2013, 17:51

No, no se ve directamente. No lo muestra...
Si, es Safari de Windows, la última versión.

Carlangueitor · #13 (**permalink**) 29/09/2013, 18:34

Safari está descontinuado en Windows. Yo no probaría mucho en él.

¿Cómo hiciste el cambio de formato? Igual y el codec no es el correcto.

Saludos

sergiomaidana1989 · #14 (**permalink**) 29/09/2013, 20:07

¿Cuál sería el type correcto? He probado con "video/mp4", "video/mpg". Y nada...
No lo sé, a los videos me lo hicieron y le dieron el formato los que me lo han hecho.

Carlangueitor · #15 (**permalink**) 29/09/2013, 20:52

No, me refiero al codec en el archivo. Prueba está página para que veas que funciona en Safari: http://www.quirksmode.org/html5/tests/video.html

De todas formas, esto ya no es cosa de tu tema inicial. Deberías abrir uno nuevo en la sección correspondiente.

Saludos

sergiomaidana1989 · #16 (**permalink**) 29/09/2013, 21:06

Nop, allí tampoco me aparecen los videos (ninguno).
Por las dudas el Safari no requiere un complemento o un programa que se llama "QT", o algo así para poder ver videos? Eso lo leí por allí. Que es un programa para ver películas, videos en Safari.

Carlangueitor · #17 (**permalink**) 29/09/2013, 21:20

No sé, hace tiempo que no uso windows y nunca usé Safari en él. Pero puedes instalar a ver si sirve: http://www.apple.com/mx/quicktime/download/

sergiomaidana1989 · #18 (**permalink**) 29/09/2013, 22:14

No, no funciona igual aparentemente.
Qué programa me recomendas para reconvertir los videos para ver si es eso.

Carlangueitor · #19 (**permalink**) 30/09/2013, 00:18

Checa esto: http://fortuito.us/diveintohtml5/vid...#handbrake-gui

sergiomaidana1989 · #20 (**permalink**) 16/10/2013, 11:46

Regreso a este Tema, ya que pienso que mi problema está relacionado mucho con el problema/duda que tengo ahora. En realidad, es lo contrario lo que quiero hacer ahora.
Ahora me gustaría hacer es cuando se está en fullscreen activado, y basándome en la función que escribí anteriormente, con la que pongo el fullscreen, al presionar la tecla Esc. se salga del modo fullscreen.

No sé si se entiende.

Gracias.