Etiqueta de vídeo HTML5 – Atributos y propiedades

Cómo insertar vídeos en HTML5, en esta lección aprenderemos una fantástica forma de crear un reproductor de vídeo utilizando código HTML, es bastante sencillo y su uso es muy similar al elemento audio que ya aprendimos en la lección anterior.

Sin más preámbulo empecemos a aprender a crear nuestro primer código.

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:

<video>
  Este es un elemento de video no soportado por tu navegador, prueba con otro...
</video>

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:

<video src="mivideo.mp4"> Vídeo no es soportado... </video>

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:

<video src="https://www.diveos.con/uploads/video.mp4" controls> Video no es soportado... </video>

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:

<video width="400px" src="monito.mp4" controls> Vídeo no es soportado... </video>

Resultado:

Este es el resultado en Google Crhome, es posible que el resultado difiera según el navegador empleado.

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.

<video controls>

       <source src="mivideo.mp4"  type="video/mp4">

       <source src="mivideo.ogg"  type="video/ogg">

       <source src="mivideo.webm"  type="video/wav">
Este es un elemento de video no soportado por tu navegador, prueba con otro
</video>

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.

<video src="mivideo.mp4" controls autoplay> Vídeo no es soportado... </video>

<video src="mivideo.mp4" controls="controls" autoplay="autoplay"> Vídeo no es soportado... </video>

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.

<video src="mivideo.mp4" controls autoplay loop> Vídeo no es soportado... </video>

<video src="mivideo.mp4" controls="controls" autoplay="autoplay" loop="loop"> Vídeo no es soportado... </video>

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.

Cómo insertar un video de YouTube en un archivo HTML

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í:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xwUUvc9eUhc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Finalmente tu documento HTML5 debería verse algo así:

<!DOCTYPE html>
<html>
<head>
  <title> MI TÍTULO</title>
</head>
   
 <body>
        
<iframe width="560" height="315" src="https://www.youtube.com/embed/xwUUvc9eUhc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>

</html>

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.

[popup_anything id=»4434″]