- Los desarrolladores ahora pueden personalizar los controles de contenido multimedia, como los botones de descarga, pantalla completa y reproducción remota.
- Los sitios instalados con el flujo "Agregar a la pantalla principal" pueden reproducir audio y video automáticamente dentro del alcance del manifiesto.
- Chrome en Android ahora detiene la reproducción automática de un video silenciado cuando es invisible.
- Los desarrolladores ahora pueden acceder al rango aproximado de colores compatibles con Chrome y a los dispositivos de salida mediante la consulta de medios
color-gamut. - Cuando se usan extensiones de fuente de medios, ahora es posible alternar entre transmisiones encriptadas y borradas.
Personalización de los controles 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].
Esta API ofrece una forma 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 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
Reproducción automática de apps web progresivas que se agregan a la pantalla principal
Anteriormente, se usaba Chrome para bloquear todos los elementos autoplay con sonido en Android, sin excepción. Esto ya no es así. A partir de ahora, los sitios instalados con el flujo Agregar a la pantalla principal pueden reproducir automáticamente el audio y el video que se entregan 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",
...
}
<html>
<link rel="canonical" href="https://example.com/foo">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
Intent de enviar | Seguimiento de Chromestatus | Error de Chromium
Pausar la reproducción automática del video silenciado cuando está 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 pausará cuando salgan 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 sobre la gama de colores
Como 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 estás familiarizado con 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 Web. Se detalla cómo usar la consulta de medios color-gamut para entregar imágenes de amplia gama cuando el usuario usa pantallas de ese tipo y, en caso contrario, recurre a imágenes sRGB.
La implementación actual en Chrome acepta las palabras clave srgb, p3 (gamut especificado por el espacio de color DCI P3) y rec2020 (gamut especificado por la recomendación ITU-R BT.2020 del 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