Insertar vídeos en HTML5 es bastante sencillo y su uso es muy similar a la etiqueta audio que ya aprendimos en el capítulo anterior.
Etiqueta vídeo en HTML5
Utilizaremos la etiqueta <video> para insertar un reproductor de vídeo en nuestra página HTML, esta etiqueta por si solo no muestra resultados, debemos emplear los atributos para que pueda funcionar correctamente.
Entre la etiqueta de apertura y cierre colocaremos el texto que aparecerá en el navegador en caso el video no sea compatible o no se pueda reproducir. Veamos el ejemplo:
Atributo src
El atributo src sirve para indicar cual es el archivo de vídeo que se debe reproducir, si el archivo se encuentra en la misma carpeta que el documento HTML, entonces su valor simplemente será el nombre del archivo con su respectivo formato de vídeo, por ejemplo:
Si queremos reproducir desde una URL primero tenemos que asegurar que en dicha dirección URL esta ubicada el vídeo y en el valor de src colocamos esa URL. Por ejemplo:
Los ejemplos presentados son ficticios, por ende no se reproducirá ningún video en esta página, pero en tu caso ubica correctamente tus archivos de video y haz que funcionen correctamente.
Atributo controls
El atributo controls sirve para dotar de controles básicos a nuestro reproductor de vídeo, tales como: volumen, reproducir, pausar, la barra de progreso, etc. su valor por defecto es también controls, y para que funcione no hace falta escribir todo, basta con colocar el controls. Veamos el ejemplo:
Este es el resultado en Google Chrome, es posible que el resultado difiera según el navegador empleado.
Tamaño de video
Si el tamaño del video es muy grande como en el caso anterior podemos modificarlo con width y la medida en píxeles.
Y veremos ahora:
Podemos observar como cambia el tamaño modificando la cantidad de px.
Etiqueta <source>
La etiqueta <source> permite insertar más de un formato de vídeo dentro de la etiqueta <video>, es bastante útil, ya que esto nos permite tener más alternativas, veamos el ejemplo.
Si el navegador del usuario no puede reproducir la primera alternativa entonces tratará de reproducir la siguiente y así hasta dar con el archivo compatible.
Atributo autoplay
Sirve para reproducir el vídeo automáticamente cuando este se haya cargado sin consultar con el usuario. Esta técnica puede resultar invasivo, imagínate, entras en una página web y de repente sin que te esperes empieza a reproducirse un vídeo que no te esperabas ¿te gustaría? No verdad, trata de usarlo siempre y cuando consideres necesario.
Los códigos producen resultados iguales, ya no es necesario colocar el valor.
El atributo autoplay ha sido abusivamente empleado para mostrar publicidad, por lo que es posible que ciertos navegadores hayan restringido su uso.
Atributo loop
Este atributo hace que el vídeo se reproduzca indefinidamente cuando el vídeo finaliza, el usuario puede controlar, pero por defecto esto hará que el vídeo siempre vuelva a reproducirse.
Formatos de vídeo
No crear que puedes meter cualquier vídeo cuando utilizas HTML5, primero asegúrate que el formato que quieres utilizar es compatible con los navegadores web. MP4 es un formato extensamente empleado, pero también tenemos otros formatos.
No olvides colocar la extensión para que tu código funcione correctamente.
MP4, OGG, WEBM son formatos de vídeo soportados.
Insertar un video de YouTube
Insertar un archivo de YouTube en nuestro documento HTML5 es tan fácil como conseguir el código de inserción del video que queremos desde YouTube y pegar en nuestro documento; por ejemplo:
El código de inserción podemos obtener dando clic derecho sobre el video y elegir la opción: copiar código de inserción. otra forma de hacerlo es dando clic sobre la opción compartir ubicada debajo de cada video, aparecerá una ventana emergente, en ella seleccionamos la opción incorporar, aparecerá un fragmento de código y copiamos para luego pegar en nuestro documento html5. Debería verse algo así:
Finalmente en el navegador debería verse algo así:
Si deseas puedes cambiar los valores y propiedades para ajustar tamaño del reproductor de video.
Es posible que algunos videos queden restringidos por parte de YouTube y no se puedan reproducir, entonces simplemente prueba con otro.