Post de introducción a la etiqueta de HTML5 video, esta nueva etiqueta tiene como funcionalidad crear un player y/o reproductor para visualizar vídeos en una página web. Establece un estandar para embeber vídeos.
Hasta la llegada de HTML5 no había ningún estandar para la reproducción de vídeos ni audios en la web, por lo que la mayoría de webs optaban por usar el plugin de flash, QuicTime, Windows Media…
Con la etiqueta video es muy sencillo crear el player para reproducir vídeo, os muestro una imagen en la que podemos apreciar un vídeo con su player con tan solo 3 líneas de código.
Otras etiquetas multimedia interesantes son:
¿Qué navegadores soportan el tag de HTML5 video?
La compatibilidad de los principales navegadores con el vídeo en HTML5 es la siguiente:
- Internet Explorer: Desde la versión 9.0 y posteriores.
- Mozilla Firefox: Desde la versión 3.5 y posteriores.
- Google Chrome: Desde la versión 4.0 y posteriores.
- Safari: Desde la versión 4.0 y posteriores.
Formatos de vídeo compatibles
Tenemos 3 formatos compatibles siendo el MP4 el más soportado por los navegadores:
- MP4: Compatible con Google Chrome, Mozilla Firefox, Safari e Internet Explorer.
- Ogg: Compatible con Google Chrome y Mozilla Firefox.
- WebM: Compatible con Google Chrome y Mozilla Firefox.
Los media type para referenciar cada uno de estos 3 formatos son:
- MP4: video/mp4
- Ogg: video/ogg
- WebM: video/webm
Os aconsejo usar este programa ‘MIRO‘ conversor de formatos de vídeo.
Sintaxis básica de la etiqueta de HTML5 video
Veamos la sintaxis básica extraída de su web oficial:
|
1 2 3 |
<video width="600" height="400"> <source src="video.mp4" type="video/mp4"> </video> |
Tal y como se aprecia en el código superior con tan solo 2 etiquetas podemos crear el player:
- 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.
Ejemplo básico de la etiqueta HTML5 video
Vamos con un primer ejemplo básico 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 el ejemplo superior:
- Tenemos la etiqueta con los atributos height y width para dar las dimesiones del vídeo.
- 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.
Introducción de subtítulos con la etiqueta track
Para la inserción de subtítulos os recomiendo este post:
Atributos de la etiqueta de HTML5 video
Os listo los atributos de vídeo disponibles:
- autoplay: Con este atributo se especifica que el vídeo comience automáticamente a reproducirse. Se puede especificar de estas 2 maneras autoplay=»autoplay» o autoplay.
- preload: En caso de omisión su valor es «auto». Sirve para especificar si queremos que el vídeo se vaya cargando independientemente si se da al play o no. Aumentaría el consumo de ancho de banda pero el usuario tendría menos cortes en la reproducción. Tenemos 3 posibles valores para este atributo:
— preload = «none»: El vídeo no comienza a descargarse hasta que el usuario haga play.
— preload = «metadata»: Solo se cargan los metadatos del vídeo (dimensiones, primer frame, duración…).
— preload = «auto»: El vídeo se descarga independientemente de la ejecución del play. - controls: Con este atributo especificamos si se muestran los típicos controles del vídeo (play, stop, volumen…). Tiene 2 posibles sintaxis: controls=»controls» o controls.
- loop: Especifica la reproducción continua del vídeo, es decir, una vez acabada la reproducción comienza de nuevo a reproducirse. Tiene 2 posibles sintaxis: loop=»loop» o loop.
- poster: URL de la imagen a mostrar cuando el vídeo no está disponible, está cargando y no ha comenzado su reproducción. Por defecto es el primer frame del vídeo.
- height y width: El alto y ancho del vídeo para mostrarse en la web.
- muted: Funcionalidad para quitar el volumen al vídeo.
- mediagroup: Establece un grupo de reproducción al que pertenece el vídeo.
- ‘src’ de la etiqueta source: URL/path del vídeo a reproducir.