HTML - HTML5 requestFullScreen

 
Vista:
sin imagen de perfil

HTML5 requestFullScreen

Publicado por Victor (22 intervenciones) el 09/08/2017 13:38:32
Buenas tardes.

Estoy intentando que un video se muestre a pantalla completa.
Este es el codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    </head>
    <body>
        <h2>Video</h2>
        <video id="video" width="320" height="240" controls >
            <source src="Celtas cortos-20 de abril.mp4" type="video/mp4">
                Your browser does not support the <code>video</code> tag.
            </video>
    </body>
    <script>
       document.getElementById("cont").requestFullScreen();
    </script>
</html>

La consola me muestra el error:
Uncaught TypeError: Cannot read property 'requestFullScreen' of null

Alguien sabe como se arregla?

Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

HTML5 requestFullScreen

Publicado por xve (1543 intervenciones) el 09/08/2017 19:49:17
Hola Victor, tienes un error, ya que el id "cont" no existe en el código html!!!

Prueba a poner:
1
document.getElementById("video").requestFullScreen();

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

HTML5 requestFullScreen

Publicado por Victor (22 intervenciones) el 10/08/2017 08:08:31
Gracias por atenderme.
lo he hecho y sigue igual

1
2
3
<script type="text/javascript">
   document.getElementById("video").requestFullScreen();
</script>

En este caso la consola me muestra el mensaje:
pagVideo_act.html:22 Uncaught TypeError: document.getElementById(...).requestFullScreen is not a function
at pagVideo_act.html:22

En la linea 22 esta esa sentencia.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

HTML5 requestFullScreen

Publicado por ScriptShow (409 intervenciones) el 10/08/2017 12:08:30
Saludos Victor,

un ejemplo para empezar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
 
<html>
<head>
<title>Video Fullscreen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Video</h2>
<video id="video" width="320" height="240" controls>
<source src="Celtas cortos-20 de abril.mp4" type="video/mp4">
Your browser does not support HTML5 video tag.
</video>
<script>
onclick=function() {
var elem = document.getElementById("video");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
}
</script>
</body>
</html>

Haz click en la página para poner a pantalla completa. Puedes utilizar el evento "onload" para que sea al cargar, etc.

P.D.: Automatizar la pantalla completa, puede no agradar inicialmente al usuario. Valora las opciones.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

HTML5 requestFullScreen

Publicado por Victor (22 intervenciones) el 11/08/2017 12:06:54
Buenas tardes.

En el IE si funciona pero la consola me muestra el error:

No se puede obtener la propiedad 'requestFullscreen' de referencia nula o sin definir.En esta linea: if (video.requestFullscreen)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

HTML5 requestFullScreen

Publicado por ScriptShow (409 intervenciones) el 12/08/2017 18:38:59
Hola Victor,

no consideres el "error" como tal. Algunas versiones de navegadores utilizan los "prefijos", los más recientes dejarán de hacerlo en un futuro. Puede que el estandar sea "requestFullscreen" según consorcios. Por ahora, no está totalmente definido...

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

HTML5 requestFullScreen

Publicado por Victor (22 intervenciones) el 13/08/2017 08:39:12
Muchisimas gracias por la aclaracion.
Estoy haciendo un cursete de html5,mediante un libro,y este no detalla ciertas cosas por lo que en ocasiones voy a ciegas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar