Actualizaciones multimedia en Chrome 58

François Beaufort
François Beaufort
GitHub

Personalización de los controles multimedia

Ahora los desarrolladores pueden personalizar los controles multimedia nativos de Chrome, como los botones de descarga, pantalla completa y remoteplayback, con la nueva API de ControlsList.

Controles multimedia nativos en Chrome 58
Controles de contenido multimedia nativos en Chrome 58

Esta API ofrece una forma de mostrar u ocultar los controles multimedia nativos que no tienen sentido o no forman parte de la experiencia del usuario esperada, o bien solo permiten un conjunto limitado de funciones.

Por el momento, la implementación actual es un mecanismo de lista de bloqueo en los controles nativos con la capacidad de establecerlos directamente desde el contenido HTML con el nuevo atributo controlsList. Consulta la muestra oficial.

Uso en HTML:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

Uso en JavaScript:

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

Intención de lanzamiento | Chromestatus Tracker | Error de Chromium

Se agregó la reproducción automática para las apps web progresivas a la pantalla principal

Anteriormente, Chrome bloqueaba todos los autoplay con sonido en Android sin excepción. Sin embargo, ya no es así. A partir de ahora, los sitios instalados con el flujo mejorado de Agregar a la pantalla principal pueden reproducir automáticamente audio y video que se publiquen desde orígenes incluidos en el alcance del manifiesto de la app web sin restricciones.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
Qué debes hacer
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

El audio se reproducirá automáticamente mientras /foo esté en el alcance.

Qué no debes hacer
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

El audio no se reproduce automáticamente, ya que /bar NO está dentro del alcance.

Intención de lanzamiento | Chromestatus Tracker | Error de Chromium

Pausa el video silenciado con reproducción automática cuando no esté visible

Como ya sabrás, Chrome en Android permite que los videos de muted comiencen a reproducirse sin interacción del usuario. Si un video está marcado como muted y tiene el atributo autoplay, Chrome comienza a reproducir el video cuando se vuelve visible para el usuario.

A partir de Chrome 58, para reducir el uso de energía, se pausará la reproducción de videos con el atributo autoplay cuando estén fuera de la pantalla y se reanudará cuando vuelvan a estar a la vista, siguiendo el comportamiento de Safari en iOS.

Intención de lanzamiento | Chromestatus Tracker | Error de Chromium

Consulta de medios color-gamut

A medida que las pantallas con amplia gama de colores se vuelven cada vez más populares, los sitios ahora pueden acceder al rango aproximado de colores que admiten Chrome y los dispositivos de salida con la consulta de medios color-gamut.

Si aún no conoces las definiciones de espacio de color, perfil de color, gama, amplia gama y profundidad de color, te recomiendo que leas la entrada del blog de WebKit Improving Color on the Web. Se explica en detalle cómo usar la consulta de medios color-gamut para publicar imágenes de gama amplia cuando el usuario usa pantallas de gama amplia y, de lo contrario, recurrir a imágenes sRGB.

La implementación actual en Chrome acepta las palabras clave srgb, p3 (gama especificada por el espacio de color DCI P3) y rec2020 (gama especificada por el espacio de color de la recomendación ITU-R BT.2020). Consulta la muestra oficial.

Uso en HTML:

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

Uso en CSS:

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

Uso en JavaScript:

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

Intención de lanzamiento | Chromestatus Tracker | Error de Chromium