Habiendo terminado el modulo 4 del curso de HTML5 desde 0, nos introducimos ya en el modulo 5 donde vamos a estudiar la inserción de elementos multimedia. Se que es una obviedad, pero los elementos multimedia son imágenes, audios, vídeos, etc y lo explico porque no todo el mundo tiene porque saberlo. Asi que vamos a por la primera clase donde vamos a aprender a insertar vídeos en HTML5, para posteriormente poder visualizarlos en nuestra página web.
HTML5 finalmente introdujo un elemento para insertar vídeos dentro de un documento HTML5, la etiqueta <video>. En la actualidad, como todos sabéis, se ha convertido en un elemento muy usado en la web.
Insertar vídeos en HTML5 es tan fácil como conocer su etiqueta y su sintaxis, que es la siguiente:
<video src="TuVideo.ext"></video>
En la etiqueta de apertura colocamos el atributo src="" (source) que quiere decir fuente o recurso. En src="" definimos la url o la ruta donde se aloja el vídeo, es decir, el nombre y la extensión.
Medidas para nuestros vídeos
Las medidas por defecto que le asigna el navegador, son las medidas originales del vídeo. Todo desarrollador, debe investigar si el formato del vídeo que queremos insertar en nuestra página web es compatible con el navegador o navegadores, el vídeo no se va a mostrar si el formato de vídeo no es compatible. Para ver la compatibilidad con el navegador debemos usar Can I use donde vamos a poder comprobar todos los elementos que queramos. Para hacer que un vídeo tenga la medida que nosotros deseamos, vamos a aplicarle a la etiqueta vídeo los atributos width="" y height="". Con width="" definimos la anchura en pixeles y con height="" que define la altura en pixeles. Lo más recomendable es utilizar solo el atributo width="", ya que el navegador muestra el tamaño del vídeo de manera proporcional.
Agregando atributos a nuestro reproductor de vídeo
Por defecto el vídeo no se reproduce, y no se muestra ningún tipo de control. Para mostrar los controles, asignamos el atributo controls sin asignarle ningún valor, los controles varían dependiendo del navegador. Para hacer que el vídeo se reproduzca de forma automática se utiliza el atributo autoplay y de manera automática comienza la reproducción, tampoco le asignaremos ningún valor. El atributo loop va hacer que el vídeo se reproduzca en bucle y a riesgo de ser cansino, tampoco vamos a asignarle ningún valor. Con el atributo poster podemos colocar una imágen al vídeo para que se visualice cuando el vídeo esta parado. A este atributo si vamos a agregarle información, concretamente vamos a asignarle la ruta donde se encuentra alojada la imágen.
<video src="video/tuvideo.mp4" width="600" controls autoplay loop poster="image/restaurante.jpg"></video>
Otros atributos relevantes de vídeo son muted, su función es silenciar los reproductores de vídeo. El atributo preload, su función es autocargar el vídeo. Debemos tener en cuenta que en la actualidad este atributo no es soportado por Internet Explorer ni Edge, pero si por Google Chrome, Firefox, Safari y Opera.
Formatos y codecs
| Formato | Reproductor | Codec |
|---|---|---|
| OGG | Vídeo | Theora |
| OGG | Audio | Vorbis |
| WebM | Vídeo | VP8 |
| WebM | Audio | Vorbis |
| MP4 | Vídeo | H.264 |
| MP4 | Audio | AAC |
Para no tener problemas tenemos que proporcionar nuestros vídeos en al menos dos formatos. Es recomendable que sean en formato MP4 y WebM, ya que tienen mayor soporte.
Cuando necesitamos insertar dos rutas eliminamos el atributo src="" de la etiqueta <video> y generamos una subetiqueta llamada <source>, la cual va a incluir el atributo src="" que contiene la ruta y además contiene el atributo type="" donde asignamos el tipo de formato. De esta manera el navegador buscará y encontrará el formato que soporten.
<video src="video/tuvideo.mp4" width="600" controls autoplay loop poster="image/restaurante.jpg"> <source src="video/tuvideo.mp4" type="video/mp4"> <source src="video/tuvideo.webm" type="video/webm"> </video>
Conclusiones
Ha sido una clase de provecho, ya que hemos aprendido, no solo a insertar vídeos en nuestra página o sitio web. También hemos aprendido como definir medidas, sus atributos y los formatos y codecs que debemos usar a la hora de insertar vídeos en HTML5. Se podría profundizar más sobre este tema, pero con lo que hemos estudiado en esta clase, tienes más que de sobra para tu objetivo, que es crear un sitio web profesional.
Me despido ya pidientote que si te ha gustado este post/clase, la compartas con tus amigos y conocidos. De esta forma, otras personas se beneficiaran de estos conocimientos como lo has hecho tu. También me gustaría que comentaras que te ha parecido esta clase o si quieres aportar algo a ella, estaré encantado de actualizarla. ¡Hasta la próxima!
0 Comentarios