El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad de plug-ins ni reproductores. El elemento video comienza con la etiqueta <video> y termina con la etiqueta </video>.
Elemento <video>
En siguiente Tabla se enumeran los atributos del elemento video:
| Atributo | Valor | Uso |
|---|---|---|
| src | Nombre de Archivo | Opcional; nombre del archivo de vídeo. |
| type | Tipo MIME | Opcional; el tipo MIME del archivo de vídeo, como video/mp4 o video/ogg |
| autoplay | autoplay | Opcional; indica si el vídeo debe comenzar a reproducirse automáticamente; utilícelo con precaución. |
| controls | controls | Opcional; indica si se deben visualizar los controles; aconsejable. |
| height | Número | Opcional; altura del vídeo en píxeles. |
| loop | loop | Opcional; indica si el vídeo debe reproducirse una y otra vez. |
| poster | Nombre del archivo | Opcional; especifica una imagen para mostrar si el navegador no puede reproducir el vídeo. |
| preload | none, metadata, auto | Opcional; valores: none (sin precarga), metadata (sólo descargar metadatos de archivos multimedia) y auto (descargar el archivo multimedia). |
| title | Descripción de texto | Opcional; especifica una breve descripción de texto que pueden mostrar los navegadores o las tecnologías de asistencia. |
| width | Número | Opcional; ancho de vídeo en píxeles. |
Tendrás que proporcionar varias versiones del archivo de vídeo debido a la compatibilidad del navegador con diferentes códecs. Planifica el acceso de archivos de vídeo en al menos dos contenedores diferentes, incluyendo MP4 y OGG (u OGV). Es típico omitir los atributos src y type de la etiqueta video y, en su lugar, configurar múltiples versiones del archivo de video con el elemento source.
Elemento source
Recuerda la sección anterior del elemento audio, donde el elemento source es una etiqueta autocontenida, o nula, que especifica un archivo multimedia y un tipo MIME. El atributo src identifica el nombre de archivo del archivo multimedia. El atributo type indica el tipo MIME del archivo. Codifica type="video/mp4" para archivos de vídeo utilizando el códec MP4. Codifica type="video/ogg" para archivos de vídeo utilizando el codec Theora. Configura un elemento source para cada versión del archivo de vídeo. Coloca los elementos source antes de la etiqueta de cierre de video.
Vídeo HTML5 en una página web
El siguiente código configura una página web con los controles nativos del navegador HTML5 para mostrar y reproducir un vídeo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Ejemplo del elemento Video</title>
</head>
<body>
<h1>Elemento Video</h1>
<video id='video' controls="controls" preload='none'
width="600" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
<source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
<source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
<a href="http://media.w3.org/2010/05/sintel/trailer.ogv">Trailer</a>
</video>
</body>
</html> Las versiones actuales de Safari, Chrome, Firefox, Microsoft Edge y Opera soportan el elemento video HTML5. Internet Explorer 9 es compatible con el elemento video, pero las versiones anteriores no lo son. Los controles que muestra cada navegador son diferentes.
Revisa el código anterior y observa el elemento anchor situado entre el segundo elemento source y la etiqueta video de cierre. Cualquier elemento HTML o texto que se encuentra en esta área es renderizado por navegadores que no soportan elemento HTML5 de video. Esto se conoce como contenido alternativo. En este caso, un hipervínculo al archivo (.mov) se proporciona para que el usuario lo descargue.
