Preparaste correctamente un archivo de video para la Web. Le diste 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 <video> elemento y el
<source> elemento. 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 por sí solo. Siempre usa 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 puede, se muestra el texto adjunto.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Cómo especificar varios formatos de archivo
Recuerda de los conceptos básicos de archivos multimedia que no todos los navegadores admiten los mismos formatos de video. El elemento <source> te permite especificar varios formatos como alternativa
en caso de que el navegador del usuario no admita 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="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Siempre debes agregar un atributo type a las etiquetas <source>, aunque
sea opcional. Esto garantiza que el navegador solo descargue el archivo que puede reproducir.
Este enfoque tiene varias ventajas sobre la publicación de diferentes HTML o secuencias de comandos del servidor, en especial en dispositivos móviles:
- Puedes enumerar los formatos en orden de preferencia.
- El cambio 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 potencialmente más confiable que usar una base de datos de asistencia del servidor con detección de agente de usuario.
- Especificar el tipo de cada fuente de archivo mejora el rendimiento de la red; el navegador puede seleccionar una fuente de video sin tener que descargar parte del video para "rastrear" el formato.
Estos problemas son especialmente importantes en contextos móviles, en los que el ancho de banda y la latencia son muy importantes, y es probable que la paciencia del usuario sea limitada. Si se omite el atributo type, se puede afectar el rendimiento cuando hay varias fuentes con tipos no compatibles.
Hay varias formas de profundizar en los detalles. Consulta Introducción a los medios digitales para expertos para obtener más información sobre cómo funcionan el audio y el video en la Web. También puedes usar la depuración remota en DevTools para comparar la actividad de la 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 se sienta 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 de los segundos 5 a 10, especifica lo siguiente:
<source src="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 de video, especifica #t=,00:01:00.
Puedes usar esta función para ofrecer varias vistas del mismo video, como puntos de referencia en un DVD, sin tener que codificar y publicar varios archivos.
Para que esta función 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. Debido a que algunos servicios de hosting los 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 del 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 alternativa si el src del video está dañado o si no se admite ninguno de los formatos de video proporcionados. La única desventaja de las imágenes de póster es una solicitud de archivo adicional, que consume algo de ancho de banda y requiere procesamiento.
Para obtener más información, consulta Cómo codificar imágenes de manera eficiente.
Asegúrate de que los videos no desborden los contenedores
Cuando los elementos de video son demasiado grandes para el viewport, pueden desbordar su contenedor, lo que impide que el usuario vea el contenido o use 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 videos de YouTube y otras fuentes. Lamentablemente, estos recursos pueden aumentar los tamaños de carga útil de la 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 con 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 la muestra responsiva con la versión no responsiva. Como puedes ver, la versión no responsiva no es una buena experiencia del usuario.
Orientación del dispositivo
La orientación del dispositivo no es un problema para los monitores de computadoras de escritorio ni las laptops, pero es muy importante cuando se considera el diseño de páginas web para dispositivos móviles y tablets.
Safari en iPhone hace un buen trabajo al cambiar entre la orientación vertical y horizontal:
La orientación del dispositivo en un iPad y Chrome en Android puede ser problemática. Por ejemplo, sin ninguna 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. La forma precisa en que funciona depende de la plataforma y el navegador.
Chrome: Depende de varios factores, incluidos, entre otros, si la visualización se realiza en una computadora de escritorio y si el usuario de dispositivos móviles agregó tu sitio o app a su pantalla principal. Para obtener más detalles, consulta Prácticas recomendadas para la reproducción automática.
Firefox: Bloquea todo el video y el sonido, pero les brinda a los usuarios la capacidad de relajar estas restricciones para todos los sitios o sitios específicos. Para obtener más detalles, 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 relajó ese requisito en versiones recientes. Para obtener más detalles, consulta Nuevas políticas de <video> para iOS.
Incluso en plataformas en las que es posible la reproducción automática, debes considerar si es una buena idea habilitarla:
- El uso de datos puede ser costoso.
- Reproducir contenido multimedia antes de que el usuario lo desee puede acaparar el ancho de banda y la CPU, y, por lo tanto, retrasar el procesamiento de la página.
- Es posible que los usuarios se encuentren en un contexto en el que la reproducción de audio o video sea intrusiva.
Precargar
El atributo preload proporciona una sugerencia al navegador sobre la cantidad de información o contenido que se debe precargar.
| Valor | Descripción |
|---|---|
none |
Es posible que el usuario elija no mirar el video, por lo que no se precarga nada. |
metadata |
Los metadatos (duración, dimensiones, pistas de texto) deben precargarse, pero con un video mínimo. |
auto |
Se considera deseable descargar todo el video de inmediato. Una cadena vacía produce el mismo resultado. |
El atributo preload tiene diferentes efectos en diferentes plataformas.
Por ejemplo, Chrome almacena en búfer 25 segundos de video en computadoras de escritorio, pero no en iOS ni Android. Esto significa que, en dispositivos móviles, puede haber retrasos en el inicio de la reproducción que no ocurren 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 momento de obtener información sobre la accesibilidad de los medios, en la que agregarás subtítulos a tu video para personas con discapacidad auditiva o cuando la reproducción de audio no sea una opción viable.