Clicky

Prácticas recomendadas para reproductores de vídeo HTML5

vídeo HTML5

Con la etiqueta <video> se producen menos bloqueos del navegador y una reproducción más fluida

Hay que ser honesto: cuando se trata de multimedia y los primeros días de Internet, definitivamente se hizo todo mal. Comenzamos con reproductores de vídeo incorporados como RealPlayer y Windows Media Player que requerían codecs personalizados y complementos de navegador, luego pasamos a Flash y Quicktime, todo lo cual hizo que nuestros navegadores estuvieran lentos y a veces incluso en riesgo desde una perspectiva de seguridad. Se tardó más de una década en crear una etiqueta <video> y, de hecho conseguir el apoyo de los navegadores. Demasiado tiempo de espera, tanto es así que muchos sitios todavía utilizan Flash para servir sus vídeos.

Dicho todo esto, la mayoría de la web está usando ahora el elemento <video> y se puede decir: menos bloqueos del navegador al usar menos memoria y una reproducción más fluida. Vamos a echar un vistazo al uso básico y avanzado de <video>, así como algunos consejos de mejores prácticas.

Uso básico de la etiqueta <video>

Veamos un ejemplo de uso de <video> en la página y seguir lo que está pasando:

<video width="640" height="480" poster="/sample-video.jpg" controls autoplay preload>
<source src="/sample-video.webm" type="video/webm">
<source src="/sample-video.ogv" type="video/ogg">
<source src="/sample-video.mp4" type="video/mp4">
<track src="/subtitles-en.vtt" kind="subtitles" srclang="en"
label="English" default>
<track src="/subtitles-fr.vtt" kind="subtitles" srclang="es"
label="Spanish">
</video>

La mayoría de los elementos <video> utilizarán los siguientes atributos:

width: La anchura del elemento <video>
height: La altura del elemento <video>
poster: La imagen representativa del vídeo, mostrada mientras el vídeo se carga
controls: Si deben mostrarse los controles nativos del navegador (en caso de que prefieras crear los tuyos propios)
preload: Si deseas o no precargar el vídeo
autoplay: Si deseas o no reproducir el vídeo automáticamente

Dentro del elemento <video> típicamente se verá:

source: Elementos que proporcionan el tipo fuente y la fuente de archivos de vídeo, ordenados por preferencia de soporte
track: Subtítulos para dicho vídeo (opcional, por supuesto)

Métodos y Propiedades de <video>:

Por el lado de JavaScript, tenemos algunos métodos para gestionar el elemento <video>:

load: Vuelve a cargar el vídeo
play: Reproduce el vídeo
pause: Hace una pausa en el vídeo

Y aunque hay muchos eventos y propiedades, estos son los más utilizados:

duration
paused
currentTime
volume

Ejemplo de <video> HTML5 insertado en este artículo:

Mejores Prácticas y Consejos

•  Ten cuidado con el atributo autoplay - en una página creada principalmente para un vídeo tiene sentido, pero al utilizar este elemento en un anuncio o en la barra lateral harás que los visitantes se molesten rápidamente.
•  Utiliza un CDN - la velocidad de carga importa.
•  Ofrece tanto estándar (MP4) como tipos de archivos de origen (WEBM): recompensa a los usuarios que tienen un cliente con capacidades avanzadas de compresión y calidad (WEBM), pero proporciona una alternativa a los formatos ampliamente compatibles (MP4).
•  Si creas elementos de control personalizados, asegúrate de que sean lo suficientemente grandes como para que sean objetivos razonables de toque para móviles.

Los reproductores de video HTML5 comenzaron de forma sencilla pero se han hecho bastante avanzados (piensa en YouTube), y como todo es HTML, CSS y JavaScript, cualquier desarrollador de front-end puede crear un impresionante reproductor de video HTML5.

Jesus_Caceres