Como poner Videos en HTML5
En esta ocasión les mostraremos como poner videos en HTML5, anteriormente solo se podían colocar videos en las páginas web con flash, pero con la creación de HTML5 esto ha cambiado y ahora es más fácil colocar videos
HTML5 (Hyper Text Markup Language, versión 5) es la quinta versión del lenguaje de programación para web HTML.
Entre algunas de las ventajas de HTML5 destacan las siguientes:
- Es nativo, y por tanto no depende de plugins de terceros.
- Incorpora metadatos de manera más formal que favorecen el posicionamiento SEO y la accesibilidad.
- Tiene código más simple
- Compatibilidad con todos los navegadores actuales
- Incluye la etiqueta de dibujo canvas, que ofrece más efectos visuales.
- Ofrece soporte a codecs específicos.
- Posibilita la inserción de vídeos y audio de forma directa.
- Permite la geolocalización del usuario.
- Tiene la capacidad de ejecutar páginas sin estar conectado.
- Incorpora nuevas capacidades Javascript que aumentan la capacidad de almacenamiento
- Dispone de nuevas capacidades CSS3 como posibilidad de usar cualquier fuente o tipografía en HTML, columnas de texto, opacidad, transparencia, canales alpha, contraste, saturación, brillo, animaciones de transición y transformación, bordes redondeados, gradientes, sombras, etc.
- Permite realizar diseños adaptables a distintos dispositivos
Como poner Videos en HTML5
Para colocar un video en HTML5 solo tienes que utilizar el siguiente código
HTML5 permite utilizar los formatos de video .mp4 , WebM , Ogg
Únicamente tenemos que cambiar movie.mp4 por la dirección nuestro archivo de video, que en este ejemplo es: http://www.juegosde.bz/videos/colores.mp4
<video width="600" height="400" controls>
<source src="http://www.juegosde.bz/videos/colores.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
El resultado nos muestra el vídeo como aparece a continuación
Atributos Opcionales para Videos en HTML5
|
Atributos
|
Valor
|
Descripcion
|
|---|---|---|
| autoplay | autoplay | Especifica que el vídeo comenzará a reproducirse tan pronto como esté listo |
| controls | controls | Especifica que los controles de vídeo se debe mostrar (como un botón de reproducción / pausa, etc). |
| height | pixels | Establece la altura del reproductor de vídeo |
| loop | loop | Especifica que el vídeo comenzará otra vez, cada vez que se terminó |
| muted | muted | Especifica que la salida de audio del vídeo debe ser silenciado |
| poster | URL | Especifica una imagen que se muestra mientras el video se está descargando, o hasta que el usuario pulsa el botón de reproducción |
| preload | autometadatanone | Especifica si y cómo el autor cree que el vídeo debe ser cargado cuando se carga la página |
| src | URL | Especifica la URL del video |
| width | pixels | Establece el ancho del reproductor de vídeo |
En la actualidad muchos sitios están adoptando la nueva versión de HTML5, tal es el caso de Youtube que ya incorpora esta tecnología para reproducir videos en HTML5, con esta tecnología se ahorran muchos recursos ya que la carga de video no genera tantos recursos para el servidor y estos cargan más rápido y son compatibles con dispositivos que no tienen incorporado Flash.
Referencias: w3schools
Esperamos que este artículo de Como poner Videos en HTML5 haya sido de tu ayuda, si tienes alguna duda o algo que compartir con nosotros por favor regálanos un comentario
Deja una respuesta