Si preparaste un archivo de video correctamente para la Web. Le has dado las dimensiones y la resolución correctas. Incluso creaste archivos WebM y MP4 separados para distintos navegadores.
Para que cualquier persona pueda ver tu video, debes agregarlo a una página web. Para hacerlo, debes agregar dos elementos HTML: el elemento <video> y el elemento <source>. Además de los conceptos básicos sobre estas etiquetas, en este artículo, se explican los atributos que debes agregar a esas etiquetas para crear una buena experiencia del usuario.
Cómo especificar un solo archivo
Aunque no se recomienda, puedes usar el elemento de video solo. Usa siempre el atributo type como se muestra a continuación. El navegador usa esto para determinar si puede reproducir el archivo de video proporcionado. Si no puede hacerlo, aparecerá el texto encerrado.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Especifica varios formatos de archivo
Recuerda que, desde los Conceptos básicos de los archivos multimedia, no todos los navegadores admiten los mismos formatos de video. El elemento <source> te permite especificar varios formatos como resguardo en caso de que el navegador del usuario no admita uno de ellos.
En el siguiente ejemplo, se muestra el video incorporado que se usa como ejemplo más adelante en este artículo.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Siempre debes agregar un atributo type al evento de etiquetas <source>, aunque es opcional. De esta manera, se garantiza que el navegador solo descargue el archivo que puede reproducir.
Este enfoque tiene varias ventajas en comparación con entregar diferentes HTML o secuencias de comandos del servidor, en especial en dispositivos móviles:
- Puedes indicar los formatos en orden de preferencia.
- El cambio del lado del cliente reduce la latencia; solo se realiza una solicitud para obtener contenido.
- Permitir que el navegador elija un formato es más simple, rápido y posiblemente más confiable que usar una base de datos de compatibilidad del servidor con detección de usuario-agente.
- Especificar el tipo de fuente de cada archivo mejora el rendimiento de la red; el navegador puede seleccionar una fuente de video sin tener que descargar parte de este para detectar el formato.
Estos problemas son especialmente importantes en contextos de dispositivos móviles, en los que el ancho de banda y la latencia son muy importantes y la paciencia del usuario puede ser limitada. Omitir el atributo type puede afectar el rendimiento cuando hay varias fuentes con tipos no compatibles.
Existen varias formas de profundizar en los detalles. Consulta A Digital Media Primer for Geeks (Guía de introducción a los medios digitales para geeks) y obtén más información sobre cómo funcionan el video y el audio en la Web. También puedes usar la depuración remota en Herramientas para desarrolladores para comparar la actividad de red con atributos de tipo y sin atributos de tipo.
Especifica la hora de inicio y finalización
Ahorra ancho de banda y haz que tu sitio sea más responsivo: usa fragmentos multimedia para agregar tiempos de inicio y finalización al elemento de video.
Para usar un fragmento multimedia, agrega #t=[start_time][,end_time] a la URL multimedia. Por ejemplo, para reproducir el video del 5 al 10 segundos, especifica lo siguiente:
<source src="video/chrome.webm#t=5,10" type="video/webm">
También puedes especificar las horas en <hours>:<minutes>:<seconds>. Por ejemplo, #t=00:01:05 inicia el video en un minuto y cinco segundos. Para reproducir solo el primer minuto del video, especifica #t=,00:01:00.
Puedes usar esta función para ofrecer varias vistas del mismo video (como puntos de inserción en un DVD) sin tener que codificar y publicar varios archivos.
Para que esta característica funcione, tu servidor debe admitir solicitudes de rango, y esa capacidad debe estar habilitada. La mayoría de los servidores habilitan las solicitudes de rango de forma predeterminada. Dado que algunos servicios de hosting las desactivan, debes confirmar que las solicitudes de rango estén disponibles para usar fragmentos en tu sitio.
Afortunadamente, puedes hacerlo en las herramientas para desarrolladores de tu navegador. En Chrome, por ejemplo, se encuentra en el panel Network. Busca el encabezado Accept-Ranges y verifica que diga bytes. En la imagen, dibujé un cuadro rojo
alrededor de este encabezado. Si no ves bytes como el valor, deberás comunicarte con tu proveedor de hosting.
Incluye una imagen de póster
Agrega un atributo de póster al elemento video para que los usuarios tengan una idea del contenido en cuanto se cargue el elemento, sin necesidad de descargar el video ni iniciar la reproducción.
<video poster="poster.jpg" ...>
…
</video>
Un póster también puede ser un resguardo si el src del video está roto o si ninguno de los formatos de video proporcionados es compatible. La única desventaja de las imágenes de pósteres es una solicitud de archivo adicional, que consume parte del ancho de banda y requiere renderización.
Para obtener más información, consulta Codifica imágenes de manera eficiente.
Asegúrate de que los videos no ocupen el espacio de contenedores
Cuando los elementos de video son demasiado grandes para el viewport, es posible que sobrepasen su contenedor, lo que impide al usuario ver el contenido o usar los controles.
Puedes controlar las dimensiones del video con CSS. Si CSS no satisface todas tus necesidades, las bibliotecas y los complementos de JavaScript, como FitVids, pueden ayudarte, incluso para los videos de YouTube y otras fuentes. Lamentablemente, estos recursos pueden aumentar el tamaño de la carga útil de tu red, con consecuencias negativas para tus ingresos y las billeteras de los usuarios.
Para usos simples como los que describo aquí, usa consultas de medios CSS para especificar el tamaño de los elementos según las dimensiones del viewport. max-width:
100% es tu amigo.
Para el contenido multimedia en iframes (como los videos de YouTube), prueba un enfoque responsivo (como el propuesto por John Surdakowski).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
Compara la muestra del dispositivo responsivo con la versión que no responde. Como puedes ver, la versión que no responde no es una gran experiencia del usuario.
Orientación del dispositivo
La orientación del dispositivo no es un problema en monitores de escritorio o laptops, pero es muy importante cuando se considera el diseño de la página web para dispositivos móviles y tablets.
Safari en iPhone hace un buen trabajo al cambiar entre la orientación vertical y la horizontal:
La orientación del dispositivo en iPad y Chrome en Android puede ser problemática. Por ejemplo, sin personalización, un video que se reproduce en un iPad en orientación horizontal se ve de la siguiente manera:
Configurar el video width: 100% o max-width: 100% con CSS puede resolver muchos problemas de diseño de orientación del dispositivo.
Reproducción automática
El atributo autoplay controla si el navegador descarga y reproduce un video de inmediato. El funcionamiento exacto depende de la plataforma y del navegador.
Chrome: Depende de varios factores, incluidos, sin limitaciones, si la visualización se realiza en computadoras de escritorio y si el usuario de un dispositivo móvil agregó tu sitio o app a la pantalla principal. Para obtener más información, consulta Prácticas recomendadas de reproducción automática.
Firefox: Bloquea todo el video y el sonido, pero les brinda a los usuarios la posibilidad de flexibilizar estas restricciones para todos los sitios o sitios específicos. Para obtener más información, consulta Cómo permitir o bloquear la reproducción automática de contenido multimedia en Firefox.
Safari: Históricamente, requirió un gesto del usuario, pero fue más lento ese requisito en las versiones recientes. Para obtener más información, consulta Nuevas políticas de <video> para iOS.
Incluso en plataformas en las que es posible habilitar la reproducción automática, debes considerar si es una buena idea habilitarla:
- El uso de datos puede ser costoso.
- La reproducción de contenido multimedia antes de que el usuario quiera puede acaparar el ancho de banda y la CPU y, por lo tanto, demorar la renderización de la página.
- Es posible que los usuarios se encuentren en un contexto en el que la reproducción de video o audio es invasiva.
Precargar
El atributo preload indica al navegador cuánta información o contenido debe precargar.
| Valor | Descripción |
|---|---|
none |
El usuario puede optar por no mirar el video, por lo que no debes precargar nada. |
metadata |
Los metadatos (duración, dimensiones y pistas de texto) deben cargarse previamente, pero con una cantidad mínima de video. |
auto |
Recomendamos descargar el video completo de inmediato. Una string vacía produce el mismo resultado. |
El atributo preload tiene efectos diferentes en distintas plataformas.
Por ejemplo, Chrome almacena en búfer 25 segundos de video en las computadoras de escritorio, pero ninguno en iOS o
Android. Esto significa que, en dispositivos móviles, es posible que haya demoras en el inicio de la reproducción, que no suceden en computadoras de escritorio. Consulta Reproducción rápida con precarga de audio y video o el blog de Steve Souders para obtener más detalles.
Ahora que sabes cómo agregar contenido multimedia a tu página web, es hora de aprender sobre la accesibilidad de contenido multimedia, en la que agregarás subtítulos a tu video para personas con discapacidad auditiva o cuando la reproducción de audio no es una opción viable.