Actualizaciones multimedia en Chrome 58

François Beaufort
François Beaufort
GitHub

Personalización de los controles de contenido multimedia

Los desarrolladores ahora 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 multimedia nativos en Chrome 58

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

Por el momento, la implementación actual es un mecanismo de lista de entidades bloqueadas en controles nativos con la capacidad de configurarlos directamente desde el contenido HTML con el nuevo atributo controlsList. Consulta el ejemplo 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

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

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

Anteriormente, se usaba Chrome para bloquear todos los autoplay con sonido en Android, sin excepción. Esto ya no es así. A partir de ahora, los sitios que se instalen con el flujo Agregar a la pantalla principal podrán reproducir automáticamente audio y video que se envíen desde los orígenes incluidos en el alcance del manifiesto de la app web sin restricciones.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
Sí
<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 a medida que /foo esté dentro del 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 porque /bar NO está dentro del alcance.

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

Pausar la reproducción automática del video silenciado cuando es invisible

Como ya debes saber, 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 reproducirlo cuando se hace visible para el usuario.

A partir de Chrome 58, para reducir el uso de energía, la reproducción de videos con el atributo autoplay se detendrá cuando se salga de la pantalla y se reanudará cuando vuelva a estar a la vista, según el comportamiento de Safari en iOS".

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

consulta de medios de gama de colores

Dado que las pantallas con una amplia gama de colores son cada vez más populares, los sitios ahora pueden acceder al rango aproximado de colores que admite Chrome y a los dispositivos de salida mediante la consulta de medios color-gamut.

Si todavía no conoces las definiciones de espacio de color, perfil de color, gama, amplia gama y profundidad de color, te recomendamos que leas la entrada de blog de WebKit sobre cómo mejorar el color en la Web. Se explica en mucho detalle cómo usar la consulta de medios color-gamut para entregar imágenes de amplia gama cuando el usuario usa pantallas de amplia gama y, de lo contrario, recurre a imágenes sRGB.

La implementación actual en Chrome acepta las palabras clave srgb, p3 (gamut especificada por el espacio de color P3 de DCI) y rec2020 (gamut especificada por la recomendación del ITU-R BT.2020 Espacio de color). Consulta el ejemplo 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")';
}

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium