Opciones alternativas para vídeos como imágenes

Safari 11.1 incluye una característica extraña pero muy útil: la capacidad de usar una fuente de video en la imgetiqueta. La idea es que haga el mismo trabajo que un GIF (silencio, reproducción automática, repetición), pero con grandes mejoras de rendimiento. ¿Qué tan grandes? “Es 20 veces más rápido y se decodifica 7 veces más rápido que el GIF equivalente”, dice Colin Bendell.

No todos los navegadores admiten esto, por lo que, para realizar una reserva, el pictureelemento está listo. Bruce Lawson muestra lo fácil que puede ser:

picture  source type="video/mp4"  !-- perhaps even an animated WebP fallback here as well --  img src="adorable-cat.gif" alt="adorable cat tears throat out of owner and eats his eyeballs"/picture

Šime Vidas señala que se obtiene una compatibilidad más amplia con el navegador mediante el uso de la videoetiqueta:

video src="https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4" muted autoplay loop playsinline/video

Pero como señaló Bendell, los beneficios de rendimiento no están ahí con el video, en particular el hecho de que el precargador no ayuda al video. Lamentablemente, videolo es por ahora, ya que:

Existe este desagradable error de WebKit en Safari que hace que el precargador descargue el primero sourceindependientemente de la declaración del tipo MIME. El cargador DOM principal se da cuenta del error y selecciona el correcto. Sin embargo, el daño ya estará hecho. El precargador desperdicia la oportunidad de descargar la imagen antes de tiempo y, además, descarga la versión incorrecta desperdiciando bytes. La buena noticia es que solucioné este error y debería aparecer en Safari TP 45.

En resumen, no es aconsejable utilizar picturey source typepara la selección del tipo MIME hasta que la próxima versión de Safari alcance el 90%+ de la base de usuarios.

Aún así, eventualmente será bastante útil.