Sencillo y rápido post para repasar los atributos height y width para la etiqueta video HTML5. Estos 2 atributos sirven como su nombre indica para definir el tamaño de un vídeo en altura y anchura.
Otros post de HTML5 con información sobre atributos de vídeo y audio son:
- Atributo poster HTML5: Establacer una imagen de preview en vídeos
- Atributo muted HTML5: Silenciar los reproductores de vídeo y audio
- Atributo controls HTML5: Activar los controles en vídeo y audio
- Atributo loop HTML5: Reproducción continua de vídeo y audio
- Atributo preload HTML5: Autocargar vídeos y audios
Sintaxis de los atributos height y width
Os muestro la sencilla sintaxis de estos atributos para vídeo extraída de su web oficial:
|
1 2 3 |
<video width="600" height="400" controls> <source src="video.mp4" type="video/mp4"> </video> |
Tal y como se aprecia en el código superior es muy fácil poner los atributos height y width. Repasemos el código:
- Con <video> indicamos que vamos que se va a embeber un vídeo, podemos asignar un alto y ancho al reproductor.
- Con <source> especificamos la ruta del vídeo a reproducir.
- Con width y heigth establecemos las dimensiones.
- Con el atributo controls mostramos los controles del player.
Ejemplo de los atributos height y width para la etiqueta video HTML5
Vamos con este ejemplo de la etiqueta vídeo para verla en funcionamiento:
|
1 2 3 4 |
<video width="640" height="360" controls> <source src="011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4"> Tu navegador no soporta HTML5 video. </video> |
Os explico detenidamente el ejemplo superior:
- Tenemos la etiqueta video con los atributos height y width para darle las dimesiones.
- Con el atributo controls mostramos los controles del player (play, pause, volumen…).
- En la etiqueta source establecemos la ruta (src) del vídeo a reproducir y definimos el tipo (video/mp4).
- En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla diciendo que el navegador no es compatible con la etiqueta.