Sin duda alguna, el contenido multimedia, especialmente en el caso de los vídeos, es un formato ampliamente valorado por los cibernautas. Por este motivo, saber cómo insertar vídeos con HTML en una página web es un tema que debes conocer muy bien, sobre todo si deseas crear una web más atractiva.
Cómo insertar vídeos con HTML en una página web con la etiqueta <video>
En primer lugar, vamos a explicarte cómo insertar vídeos con HTML en una página web gracias a la etiqueta <video>.
Desde que se lanzó la quinta revisión de HTML, denominada HTML5, los desarrolladores web empezaron a integrar a las páginas web la etiqueta <video>. Esta nueva etiqueta cambió la forma de mostrar los contenidos multimedia y te permite insertar vídeos en HTML.
Antes de octubre de 2014, fecha en la que se lanzó HTML5, incrustar un vídeo en una página web era un trabajo laborioso para los nuevos desarrolladores. Ahora, gracias a la siguiente línea, puedes insertar vídeos con HTML de forma sencilla y práctica:
//Cómo insertar vídeos con HTML en una página web
//añadir video html
<video src="cómo insertar videos con html.mp4" width="420" height="240"></video>De esta forma, podemos mostrar en nuestra página un vídeo que tenemos alojado en la red. Lo siguiente es añadir atributos a nuestro antojo para una mejor visualización. En el ejemplo anterior vemos que el vídeo se mostrará en la página con un tamaño de 420 píxeles de ancho y 240 píxeles de alto.
Ahora bien, ¿qué pasa si el formato de vídeo que queremos mostrar no puede reproducirse en algún navegador? Basta con agregar una línea que le diga al internauta que no está disponible. Veámoslo con un ejemplo:
//Cómo insertar vídeos con HTML en una página web
//html video url
<video src="cómo insertar videos con html.mp4" width="420" height="240">
Lo sentimos. Este vídeo no puede reproducirse en este navegador.<br>
Puedes descargar el vídeo aquí: <a href="URL">Enlace</a>.
</video>Pero eso no es lo único que puedes hacer con la etiqueta <video>. A continuación, te mostramos todos los atributos disponibles para que aprendas a insertar vídeos con HTML en una página web como un experto.
Atributos de la etiqueta <video>
Los atributos de la etiqueta para insertar vídeo en HTML son:
| autoplay | Atributo de tipo booleano. Si se incluye en el código, inicia la reproducción automática del vídeo en cuanto la página se carga. |
| buffered | Atributo de lectura que incluye un objeto TimeRanges (en-US). Permite determinar qué intervalos de tiempo están almacenados en búfer. |
| controls | Un atributo que permite al usuario aumentar o disminuir el volumen del vídeo, avanzar o detener la reproducción. |
| height | Atributo que indica la altura del vídeo en píxeles del vídeo en HTML. |
| loop | Un atributo tipo booleano. Una vez terminado el vídeo en HTML, se vuelve a reproducir desde el inicio. |
| poster | Un atributo que incluye una URL donde se aloja una imagen de vista previa. Si no se especifica este atributo, el primer fotograma del vídeo será la vista previa. |
| src | Atributo principal en el que se especifica la URL donde tenemos alojado el vídeo. También puedes usar la etiqueta <source> para el vídeo en HTML. |
| widht | Atributo que indica el ancho del vídeo en píxeles. |
Cabe destacar que existe un inconveniente con la última revisión de HTML5 y algunos navegadores. Resulta que algunos navegadores no soportan ciertos formatos de vídeo, especialmente existen problemas con los codecs. Por este motivo, puede que nuestro vídeo incrustado se vea muy bien en Chrome, por ejemplo, pero en Opera no se reproduzca.
Para solucionar este tema, HTML5 incluye el atributo source, que nos permite subir el mismo vídeo con diferente formato.
//Cómo insertar vídeos con HTML en una página web
//video href
<video width="420" height="240">
<source src="cómo insertar videos con html.mp4" type="video/mp4" />
<source src="cómo insertar videos con html.webm" type="video/webm" />
<source src="cómo insertar videos con html.ogv" type="video/ogg" />
<img src="default.png" alt="Video no soportado" />
Su navegador no soporta este formato de vídeo.
</video>De acuerdo con el código anterior, podemos reproducir nuestro vídeo prácticamente en cualquier navegador. No obstante, si el navegador definitivamente no soporta ninguno de los formatos que manejamos para el vídeo, entonces se mostrará un texto que dice: Su navegador no soporta este formato de vídeo.
Insertar vídeos con HTML desde plataformas externas
Otra forma de insertar vídeos es hacerlo directamente desde las plataformas externas, como YouTube o Vimeo. En estos casos, usamos la etiqueta <iframe>. De hecho, incorporar vídeos de esta forma a una página web evita que se sobrecargue el servidor propio, puesto que la plataforma se encarga de los datos de la retransmisión. Por otro lado, las plataformas como YouTube garantizan la compatibilidad con la mayoría de navegadores.
Generalmente, para incorporar un vídeo alojado en una plataforma debemos solicitar el código o buscar la opción de incorporar vídeo. El siguiente es un ejemplo del código generado por Youtube para un vídeo:
//Cómo insertar vídeos con HTML en una página web
<iframe width="560" height="315" src="https://www.youtube.com/embed/LRTOUqLmuAU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Y este sería el vídeo incorporado con ese código:
Saber más
Finalmente, saber cómo insertar vídeos con HTML en una página web es un conocimiento necesario para todo desarrollador web. Sin embargo, este es solo uno de los muchos conocimientos imprescindibles para crear una página web completa. Si quieres volverte experto en poco tiempo, te recomiendo que realices el Desarrollo Web Full Stack Bootcamp. ¡Puedes inscribirte ya!
