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, sobretodo, 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 permiten insertar video 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 videos con HTML de forma sencilla y práctica:
<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 pixeles de alto y podremos insertar video en html.
Ahora bien, ¿qué pasa si el formato de vídeo que queremos mostrar no puede reproducirse en un algún navegador? Basta con agregar una línea que le diga al internauta que no está disponible. Veámoslo con un ejemplo:
<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 video aqui: <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 video en html, es decir, la etiqueta video html, son:
| autoplay | Atributo de tipo booleano. Si se incluye en el código, inicia la reproducción automática del vídeo más pronto para la etiqueta video html. |
| 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, búsqueda para la etiqueta video HTML. |
| height | Atributo que indica la altura del vídeo en píxeles del video en HTML. |
| loop | Un atributo tipo booleano. Una vez terminado el video 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 video en HTML. |
| widht | Atributo que indica el ancho del vídeo en píxeles para la etiqueta video html. |
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ídeos, 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.
<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 video.
</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 video.
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:
<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!
