Saltar al contenido

Como poner Videos en HTML5

Como poner Videos en HTML5

Como poner Videos en HTML5  

En esta ocasión les mostraremos como poner videos en HTML5, anterioermente 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=600height=400controls>
<source src=http://www.juegosde.bz/videos/colores.mp4type=video/mp4>
Your browser does not support the video tag.
</video>

El resultado nos muestra el vídeo como aparece a continuación

Lee También:  Como instalar un Antivirus Gratis

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