- Ahora los desarrolladores pueden personalizar los controles 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 automáticamente audio y video en el 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 admitidos por 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 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.
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",
...
}
<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.
<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