Imágenes no es el único tipo de medio que puede usarse en HTML, el manejo de Video en HTML5 se ha desarrollado en la última década y ha permitido que hoy en día se tenga un soporte estandarizado del uso del video en los navegadores sin necesidad de extensiones como Flash, Windows Media o RealPlayer.
Formatos de Video
Diferentes navegadores soportan diferentes formatos de video, para manejar video en HTML existen 3 formatos: MP4, Ogg Vorbis y WebM.
MP4 H264 es el más común, todos los navegadores modernos e incluso Flash lo soportan.
WebM, lo usan Firefox, Chrome y Opera.
Ogg Vobis, lo usan Firefox, Chrome y Opera, no se usan comúnmente en proyectos HTML, pero llegado el caso y la necesidad con cualquier formato, pueden mirar el soporte de cada uno de ellos en:
https://caniuse.com/?search=mp4
Estructura de Elementos de Video
Para manejar archivos de video se usa el elemento video <video>, usando etiquetas de apertura y de cierre. Y para adicionar los diferentes tipos de archivos que se quieran soportar se utilizan elementos source <source> o fuente, uno para cada tipo de video que se quiera soportar.
< video >
<source src=" video / Fenavi.ogg" type="audio/ogg; codec=opus">
<source src=" video / Fenavi.mp4" type="audio/mpeg">
Lo sentimos, el navegador que está usando no soporta archivos de video.
</ video >
Para cada formato de video que se quiera soportar, el elemento source debe contener los atributos src (la ubicación del archivo) y type (el tipo de archivo)
Por ultimo para mantener compatibilidad con navegadores que no soporten video (no es común actualmente) se puede colocar un texto informativo.
Atributos de Elementos de Video
El atributo ‘controls’
Controls es un atributo booleano (falso o verdadero) que nos permite adicionar controles para el elemento video. Los controles adicionados corresponden a los controles provistos por el navegador de manera predeterminada.
< video controls>El Atributo ‘autoplay’
autoplay es un atributo booleano (falso o verdadero) que nos permite hacer que el video se reproduzca automáticamente apenas pueda hacerlo, en el caso de archivos de audio que se deban descargar de la red, apenas descargue la cantidad suficiente para ejecutarse.
< video autoplay>El Atributo ‘width’ y ‘height’
Width y height son atributo que nos permite manejar el ancho y el alto del video, incluso antes que se precargue desde la internet, similar a las imágenes el HTML puede dibujar el elemento video en base al ancho y alto.
< video width="480" height="300">El Atributo ‘preload’
Preload permite que se precargue cierta cantidad del video antes que se ejecute.
< video preload="auto">El Atributo ‘poster’
poster permite que sobre el elemento video se anteponga una imagen que servirá como poster antes de dar play al video.
< video poster="video/poster.jpg">
Deja una respuesta