En este artículo aprenderás a incrustar videos en tu página o proyecto web haciendo uso de la etiqueta HTML: video.
Actualmente, los navegadores web soportan una gran cantidad de formatos de video: mp4, m4v, WebM, Ogg. Sin embargo, los formatos: mp4 y Ogg, son los formatos más compatibles con los navegadores, incluso los navegadores con versiones antiguas.
La etiqueta de video ofrece una integración natural con el resto de capas de desarrollo de una página web como CSS, Javascript y por supuesto otras etiquetas HTML.
Etiqueta HTML video
La forma correcta de insertar la etiqueta HTML video en una página web es: <video src=”ruta_video.mp4”></video>.
De esta forma, ya se puede incrustar video en nuestra página web. Sin embargo, no es suficiente. La etiqueta necesita de atributos para extender su funcionalidad.
Atributos de la etiqueta video
- controls. Este atributo permite agregarle los controles básicos para que la persona que está visualizando el video pueda darle play o pausar su reproducción; también, muestra lo que sería la barra de reproducción del video. Este atributo no se debe especificar más, es de una sola palabra porque el navegador entiende su función.
- preload. Valor “auto”. Este atributo permite que el video se empiece a cargar desde el momento que el navegador abre la página web que contiene el video, esto, es para que la persona que va a observar el video no espere mucho para comenzar a ver el contenido.
Ejemplo de la incrustación de la etiqueta HTML video
<video src=”./mivideo.mp4” controls preload=”auto”></video>Etiqueta HTML source
Dentro de la etiqueta HTML de video, se puede agregar otra etiqueta llamada source. Su manera correcta de escribirla es la siguiente: <source/>.
Esta etiqueta, existe para ofrecer la posibilidad de tener alternativas de formatos de video a cargar en un navegador. Esto, es muy útil cuando las personas que están accediendo a la página web, lo hacen a través de un navegador un poco antiguo, o simplemente el navegador no soporta ese formato.
Ejemplo de la incrustación de la etiqueta HTML video
<video controls preload=”auto”><source src=”./mivideo.mp4” /><source src=”./mivideo.m4v” /></video>Hack para iniciar un video a partir de un minuto determinado
<video src=”./mivideo.mp4#t=3,10” controls preload=”auto”></video>A través del código #t=3,10, justo al final del formato, le indicamos al navegador en qué minuto deseamos que inicie y termine el video. Así en este ejemplo, el video iniciará a partir del minuto 3 y finalizará en el minuto 10.
Información adicional acerca de la etiqueta HTML de video
El atributo preload no significa que el video va a iniciar a reproducirse solo, de hecho, es una muy mala práctica forzar el inicio del video sin que lo desee antes la persona que está navegando en una página web. Incluso, es tan molesto, que ya muchos navegadores evitan que esto ocurra sin previa autorización de las personas.
Incrustar en el HTML varias etiquetas de video con un mismo video pero en diferentes formatos, no es lógico, porque así, la página web mostraría en el navegador varios videos; entonces, la manera correcta es utilizando la etiqueta source.
Por último, piensa: ¿Realmente es necesario cargar un video que esté alojado desde mi servicio de alojamiento? Yo recomiendo que reflexiones al respecto, tener un video almacenado en nuestro servicio de alojamiento consume tamaño en disco y algo denominado consumo de ancho de banda. Entonces ¿No es mejor hacer uso de servicios como Youtube?