Preparaste correctamente un archivo de video para la Web. Le asignaste las dimensiones y la resolución correctas. Incluso creaste archivos WebM y MP4 separados para diferentes navegadores.
Para que cualquier persona pueda ver tu video, debes agregarlo a una página web. Para hacerlo correctamente, debes agregar dos elementos HTML: el elemento <video> y el elemento <source>. Además de los aspectos 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.
Especifica un solo archivo
Aunque no se recomienda, puedes usar el elemento de video por sí solo. Usa siempre el atributo type como se muestra a continuación. El navegador lo usa para determinar si puede reproducir el archivo de video proporcionado. Si no es así, se mostrará el texto adjunto.
<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, como se indica en Conceptos básicos de los archivos multimedia, no todos los navegadores son compatibles con los mismos formatos de video. El elemento <source> te permite especificar varios formatos de resguardo en caso de que el navegador del usuario no sea compatible con uno de ellos.
En el siguiente ejemplo, se produce 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. Esto garantiza que el navegador solo descargue el archivo que puede reproducir.
Este enfoque tiene varias ventajas en comparación con el ofrecimiento de diferentes HTML o secuencias de comandos del servidor, especialmente en dispositivos móviles:
- Puedes hacer una lista de los formatos en orden de preferencia.
- El cambio del cliente reduce la latencia; solo se realiza una solicitud para obtener el contenido.
- Permitir que el navegador elija un formato es más simple, más rápido y, posiblemente, más confiable que usar una base de datos de asistencia 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 descargar parte del video para “probar” el formato.
Estos problemas son especialmente importantes en contextos móviles, en los que el ancho de banda y la latencia son fundamentales, y es probable que la paciencia del usuario sea limitada. Omitir el atributo type puede afectar el rendimiento cuando hay varias fuentes con tipos no admitidos.
Existen algunas formas de analizar los detalles. Consulta A Digital Media Primer for Geeks para obtener 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 DevTools 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 de medios para agregar horas de inicio y finalización al elemento de video.
Para usar un fragmento de medios, agrega #t=[start_time][,end_time] a la URL de medios. Por
ejemplo, para reproducir el video del segundo 5 al 10, 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 comienza el video a los 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 en el mismo video (como puntos de entrada en un DVD) sin tener que codificar y entregar varios archivos.
Para que esta función funcione, tu servidor debe admitir solicitudes de rango y esa función debe estar habilitada. La mayoría de los servidores habilitan las solicitudes de intervalo 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 de red. 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 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 una reserva si el src de video se daña o si ninguno de los formatos de video proporcionados es compatible. La única desventaja de las imágenes de póster es una solicitud de archivo adicional, que consume parte del ancho de banda y requiere renderización.
Para obtener más información, consulta Cómo codificar imágenes de manera eficiente.
Asegúrate de que el video no supere el tamaño del elemento contenedor
Cuando los elementos de video son demasiado grandes para la ventana de visualización, es posible que sobrepasen el contenedor, lo cual imposibilita que el usuario vea el contenido o use los controles.
Puedes controlar las dimensiones del video con CSS. Si el CSS no satisface todas tus necesidades, las bibliotecas y los complementos de JavaScript, como FitVids, pueden ayudarte, incluso con videos de YouTube y otras fuentes. Lamentablemente, estos recursos pueden aumentar los tamaños de la carga útil de la red, lo que puede tener consecuencias negativas para tus ingresos y las billeteras de tus 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 de la ventana de visualización. max-width:
100% es tu amigo.
Para mostrar contenido multimedia en iframes (como en videos de YouTube), prueba un enfoque responsivo (como el que propone 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 el ejemplo responsivo con la versión no responsiva. 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 orientación vertical y horizontal:
La orientación del dispositivo en un iPad y en Chrome para Android puede ser problemática. Por ejemplo, sin personalización, un video que se reproduce en un iPad con 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 de dispositivos.
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 el navegador.
Chrome: Depende de varios factores, incluidos, entre otros, si la visualización es en una computadora de escritorio y si el usuario de dispositivos móviles agregó tu sitio o app a la pantalla principal. Para obtener más información, consulta las prácticas recomendadas de reproducción automática.
Firefox: Bloquea todo el video y el sonido, pero les permite a los usuarios relajar 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 se ha relajado ese requisito en versiones recientes. Para obtener más información, consulta Nuevas políticas de <video> para iOS.
Incluso en las plataformas donde es posible usar la reproducción automática, deberías plantearte si es una buena idea habilitarla:
- El uso de datos puede ser costoso.
- Reproducir contenido multimedia antes de que el usuario lo desee puede agotar el ancho de banda y la CPU, y, por lo tanto, retrasar la renderización de la página.
- Es posible que los usuarios accedan desde un entorno en el que la reproducción de video o de audio pueda molestar.
Precargar
El atributo preload indica al navegador cuánta información o contenido debe cargarse previamente.
| Valor | Descripción |
|---|---|
none |
Es posible que el usuario decida no mirar el video, por lo que no cargues nada previamente. |
metadata |
Los metadatos (duración, dimensiones, pistas de texto) deberían cargarse previamente, pero con una cantidad mínima de video. |
auto |
Lo ideal sería descargar todo el video directamente. Una cadena vacía produce el mismo resultado. |
El atributo preload tiene diferentes efectos en diferentes plataformas.
Por ejemplo, Chrome almacena en el búfer 25 segundos de video en los dispositivos de escritorio, pero no almacena nada en iOS ni en Android. Esto significa que en un dispositivo móvil, el inicio de la reproducción podría retrasarse, algo que no sucede en los dispositivos de escritorio. Consulta Reproducción rápida con carga previa de audio y video o el blog de Steve Souders para obtener más información.
Ahora que sabes cómo agregar contenido multimedia a tu página web, es hora de aprender sobre la accesibilidad multimedia, en la que agregarás subtítulos a tu video para personas con discapacidad auditiva o cuando no sea una opción viable reproducir el audio.