Actualmente el formato vídeo es uno de los más valorados por los usuarios. Y no sólo eso, sino que los motores de búsqueda también recompensan el valor que brindan los contenidos multimedia en una página web. Por estos motivos, aprender a insertar vídeo en HTML en un sitio web es algo fundamental.
Te traemos la guía definitiva de cómo insertar vídeo en HTML.
¡Aprende con Assembler Institute of Technology!
Cómo poner un vídeo en HTML en una web
Desde 2014, cuando HTML lanzó su quinta revisión, los programadores comenzaron a integrar en los sitios web la etiqueta <video>. Esta etiqueta permite insertar vídeos en una página de manera más sencilla que antes de esta última revisión de HTML5.
Te enseñamos cómo hacerlo:
<video src=”insertar videos en html.mp4” width=”640” height=”480”></video>
Con esta línea de código, conseguimos mostrar en un sitio web un vídeo que se encuentre online. Como véis, además de la etiqueta de apertura <video> y la de cierre </video> también hemos añadido los atributos del vídeo, para mejorar su visualización.
El ejemplo nos dice que: el vídeo se verá con un tamaño de 640px de ancho (<width>) y 480px de alto (<height>). De esta manera, si los especificamos nosotros, evitamos que el navegador sea el que determine los parámetros.
No creas que es todo, podemos hacer muchas cosas más con la etiqueta <video> gracias a todos sus atributos. Te mostramos algunos ejemplos.
Atributo source, controls y poster
Empezamos explicando estos tres atributos
- Source: con la etiqueta <source> señalamos la ruta del vídeo que queremos reproducir. Además, nos permite colgar el mismo vídeo en distintos formatos.
- Controls: este atributo da al indica que se mostrarán los controles de reproducción del vídeo,es decir, que el usuario podrá subir o bajar el volumen, pausar el vídeo…tomar el control sobre él, como el propio nombre indica.
- Poster: Si especificamos este atributo, podremos incluir una imagen de vista previa.
Veamos un ejemplo de una línea de código que incluye estos tres atributos:
<video width=”640” height=”480” controls poster=”/imagen-preview.png”>
<source src=”insertar-video-en-html.mp4” type=”video/mp4”>
¿Qué vemos en este código? Nos está indicando que el vídeo se mostrará con un tamaño de 640px de ancho y 480px de ancho, que se mostrarán los controles de reproducción y que el formato a reproducir es “insertar-video-en-html.mp4”.
¡Veamos algunos atributos más para insertar un vídeo en HTML como un experto!
Atributo Autoplay y Loop
- Autoplay: Si añadimos a la línea de HTML el atributo autoplay estamos indicando que queremos activar la reproducción automática del vídeo.
- Loop: insertando este atributo, conseguimos que el video se reproduzca en bucle.
Lo vemos en este ejemplo:
<video width=”640” height=”480” controls autoplay loop>
<source src=”insertar-video-en-html.mp4” type=”video/mp4></video>
Aquí podemos ver, al igual que en los ejemplos anteriores, que se indica el tamaño del video, que los controles de reproducción se verán, que se reproducirá cuando se carga la página y en bucle.
Atributo Preload
Insertando el atributo preload estamos indicando cómo realizar la precarga del vídeo. Vemos cómo insertarlo en el siguiente ejemplo:
<video width=”640” height=”480” controls preload>
<source src=”insertar-video-en-html.mp4” type=”video/mp4>
Leyendo este código podemos saber el tamaño del video, que el usuario podrá ver los controles de reproducción y que comenzará a reproducirse cuando cargue la página, gracias al atributo preload.
Además de estos atributos, también podemos utilizar el mute, para silenciar el reproductor de vídeo. Cuando utilizamos este atributo, también se aconseja utilizar el atributo controls para darle la opción al usuario de controlar el volumen.
A tener en cuenta: los formatos de vídeos
Cuando vas a insertar un vídeo en HTML, debes asegurarte de que el formato que quieres utilizar es compatible con los navegadores, sino no se reproducirá. El formato más extendido es el MP4 y con él no deberías tener problemas. Otros formatos que también se soportan son WEBM o OGG.
Para garantizar que tu vídeo podrá reproducirse en los diferentes formatos, te recomendamos que utilices la etiqueta <source>, que como ya te hemos comentado, te permite subir el mismo vídeo en diferentes formatos. Aquí va un ejemplo:
<video width=”640” height=”480”>
<source src=”insertar-videos-en-html.mp4” type=”video/mp4”/>
<source src=”insertar-videos-en-html.mp4” type=”video/webm”/>
<source src=”insertar-videos-en-html.mp4” type=”video/ogg”/>
<img decoding="async" src="”default.png”" alt="”Video" no data-lazy-src="http://”default.png”?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img data-lazy-fallback="1" src=”default.png” alt=”Video no soportado” /></noscript>
Su navegador no soporta este formato de video.
</video>
Protocolo de streaming de vídeo HLS
No queríamos dejar de mencionar en este artículo el protocolo HLS, también conocido como HTTP Live Streaming. Se trata de uno de los protocolos de streaming de vídeo más utilizados. ¿En qué consiste?
HLS se trata de un protocolo de retransmisión de vídeo que puede ejecutarse prácticamente en cualquier servidor y es compatible con la mayor parte de dispositivos.
Este fue creado por Apple en 2009 y permite a los reproductores reproducir videos con la mejor calidad compatible con su conexión en el momento de la reproducción. Se utiliza tanto para streaming en directo como para video on demand (VOD).
¡Ahora ya sabes poner vídeos en HTML como un profesional! Pero si además de eso, quieres convertirte en un experto informático y aprender HTML5, con nuestro Máster Software Development podrás hacerlo. En solo 7 meses te convertirás en un desarrollador totalmente cualificado.
Trabajarás con las tecnologías más pioneras y utilizadas del sector y en base a proyectos reales. Te prepararemos para lo que te encontrarás cuando finalices tus estudios.
¡Estudia en Assembler Institute of Technology!
0 comentarios