Qué es el vídeo HTML5?
La especificación de HTML 5 introduce el elemento de vídeo con el fin de reproducir vídeos, reemplazando parcialmente el elemento de objeto.
de vídeo HTML5 está concebida por sus creadores para convertirse en la nueva forma estándar para mostrar vídeo en la web, en lugar de la estándar de facto anterior de utilizar el propio plugin de Adobe Flash, aunque la adopción temprana se vio obstaculizado por la falta de acuerdo en cuanto a que los formatos de codificación de vídeo y formatos de codificación de audio deben ser compatibles con los navegadores web.
Reproducción de vídeos en HTML
Antes de HTML5, no había ninguna norma para mostrar vídeos en una página web.
Antes de HTML5, vídeos sólo podían ser jugados con un plug-in (like flash) .
El HTML5 <video> elemento especifica una forma estándar para incrustar un vídeo en una página web.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el <video> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
El HTML <video> Element
Para mostrar un vídeo en HTML, utilice el <video> elemento:
Ejemplo
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Inténtalo tú mismo " Cómo funciona
El controls atribuyen añade controles de vídeo, como reproducción, pausa y volumen.
Es una buena idea incluir siempre width y la height los atributos.
Si la altura y anchura no están establecidos, el navegador no conoce el tamaño del vídeo. El efecto será que la página va a cambiar (or flicker) mientras se carga el vídeo.
Texto entre el <video> y </video> etiquetas sólo se mostrará en los navegadores que no soportan el <video> elemento.
Múltiples <source> elementos pueden enlazar a diferentes archivos de vídeo. El navegador usará el primer formato reconocido.
HTML <video> Reproducción automática
Para iniciar un video utilice automáticamente la autoplay de atributos:
Ejemplo
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Inténtalo tú mismo " La autoplay atributo no funciona en los dispositivos móviles como el iPad y el iPhone.
HTML Video - Soporte para el navegador
Actualmente, hay 3 formatos de vídeo compatibles para el <video> elemento: MP4, WebM, y Ogg:
| Navegador | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML Video - Tipos de medios
| Formato de archivo | Tipo de medio |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video - métodos, propiedades y eventos
HTML5 define métodos DOM, propiedades y eventos para el <video> elemento.
Esto le permite cargar, reproducir, pausar y vídeos, así como establecer la duración y volumen.
También hay eventos DOM que se le notifique cuando un vídeo comienza a jugar, está en pausa, etc.
Para una referencia DOM completa, vaya a nuestra HTML5 Audio / Video Referencia DOM .
HTML5 video Etiquetas
| Etiqueta | Descripción |
|---|---|
| <video> | Define un vídeo o una película |
| <source> | Define múltiples recursos multimedia para elementos multimedia, como <video> y <audio> |
| <track> | Define pistas de texto en reproductores de medios |