Tutorial: Aprender HTML5 de forma eficiente (6ta parte)

Publicado por Unknown | 0 comentarios

En secciones anteriores de este tutorial hemos hablado de diversos temas, algunas recomendaciones, elementos de HTML5   incluso algunos de HTML4,  hoy les comentare de las nuevas funciones de HTML5 para agregar audio y vídeo a las paginas web, esto sin necesidad de ningún plugin extra o dependiendo de otra fuente para cargarlo, la idea es cargar el vídeo directamente en nuestra pagina.

La verdad es algo bastante sencillo, no es mas que colocar la respectiva etiqueta y la fuente dentro de nuestro directorio donde se encuentra el vídeo veamos unos ejemplos.

Vídeo

Para cargar vídeos dentro de nuestra pagina web solo es necesario la etiqueta <video> acompañada por su respectivo cierre, entre ellas es recomendable colocar un mensaje para los navegadores que aun no tienen soporte como por ejemplo:

<video src='ejemplo.webm' controls'> Tu navegador no soporta HTML5 </video>

Por supuesto también podemos cambiar sus proporciones con width y height y tenemos que tener cuidado con el formato del vídeo, les dejare por acá una tabla

Imagen de mrc-productivity.com

Una opción fácil para evitar la incompatibilidad es agregar múltiples fuentes para el vídeo en distintos formatos, algo así:

<video controls>
<source src=ejemplo.ogg'' type=video/ogg''/>
<source src='ejemplo.webm' type='video/webm'/>
<source src='ejemplo.mp4' type='video/mp4'/>
Tu navegador no soporta HTML5
</video>

 Audio

<audio controls><source src=ejemploaudio.ogg'' type=audio/ogg''/><source src='ejemploaudio.wav' type='audio/wav'/><source src='ejemploaudio.mp3' type='audio/mpeg'/>Tu navegador no soporta HTML5</audio>

Para ambos existen atributos como autoplay el cual permite reproducir el elemento tan pronto como cargue la pagina aunque esta práctica me parece bastante molesta por mi parte, además no sabemos si el usuario esta accesando desde algún dispositivo con una cantidad de Mb limitados, y loop el cual permite que se repita el elemento una y otra vez tan pronto como termine, también es posible crear tus propios controles o limitar los ya existentes.

Creo que esto cubre todos los aspectos básicos necesarios para crear tu propia página web, igualmente si tienes alguna duda o crees que haga falta alguna parte, o que amplié alguna ya existente, todos los comentarios son bienvenidos.

Les dejo tambien la lista de las partes anteriores de este tutorial
1ra Parte
2da Parte
3ra Parte
4ta Parte
5ta Parte