- Agora, os desenvolvedores podem personalizar controles de mídia, como os botões de download, tela cheia e reprodução remota.
- Os sites instalados usando o fluxo "Adicionar à tela inicial" podem reproduzir áudio e vídeo automaticamente no escopo do manifesto.
- Agora o Chrome no Android pausa a reprodução automática de um vídeo sem som quando ele está invisível.
- Agora, os desenvolvedores podem acessar o intervalo aproximado de cores que são compatíveis com o Chrome e
os dispositivos de saída usando a consulta de mídia
color-gamut
. - Ao usar extensões de origem de mídia, agora é possível alternar entre streaming criptografado e claro.
Personalização dos controles de mídia
Agora, os desenvolvedores podem personalizar os controles de mídia nativos do Chrome, como os botões de download, tela cheia e remoteplayback, usando a nova API ControlsList.
Essa API oferece uma maneira de mostrar ou ocultar controles de mídia nativos que não fazem sentido ou não fazem parte da experiência do usuário esperada ou que permitem apenas um conjunto limitado de recursos.
Por enquanto, a implementação atual é um mecanismo de lista de bloqueio em controles nativos,
com a possibilidade de defini-los diretamente do conteúdo HTML usando o novo
atributo controlsList
. Confira o exemplo oficial (link em inglês).
Uso em HTML:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
Uso em 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 envio | Rastreador de status do Chrome | Bug do Chromium
Reprodução automática de Progressive Web Apps adicionada à tela inicial
Anteriormente, o Chrome costumava bloquear todos os autoplay
com som no Android sem
exceção. Isso não é mais verdade. A partir de agora, os sites instalados usando o
fluxo aprimorado de Adicionar à tela inicial podem reproduzir automaticamente o áudio e o vídeo
veiculados das origens incluídas no escopo do manifesto do app da Web sem
restrições.
{
"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>
O áudio será reproduzido automaticamente quando /foo
estiver no escopo.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
O áudio não é reproduzido automaticamente porque /bar
NÃO está no escopo.
Intent de envio | Rastreador de status do Chrome | Bug do Chromium
Pausar a reprodução automática do vídeo sem som quando invisível
Como você já deve saber, o Chrome no Android permite que vídeos muted
comecem a ser reproduzidos
sem interação do usuário. Se um vídeo estiver marcado como muted
e tiver o
atributo autoplay
, o Chrome vai começar a mostrar o vídeo quando ele ficar visível
para o usuário.
A partir do Chrome 58, para reduzir o consumo de energia, a reprodução de vídeos com
o atributo autoplay
será pausada quando fora da tela e retomada quando novamente
visualizada, seguindo o comportamento do Safari para iOS.
Intent de envio | Rastreador de status do Chrome | Bug do Chromium
consulta de mídia de gama de cores
Como as telas com uma gama ampla de cores são cada vez mais conhecidas, os sites agora podem acessar o
intervalo aproximado de cores compatíveis com o Chrome e os dispositivos de saída usando a
consulta de mídia color-gamut
.
Se você ainda não conhece as definições de espaço de cores, perfil de cores,
gama, ampla gama e profundidade de cor, é altamente recomendável ler a postagem do blog
Como melhorar a cor na Web (link em inglês) do WebKit. Ela aborda muitos detalhes sobre como
usar a consulta de mídia color-gamut
para exibir imagens de ampla gama quando o usuário
está em telas de ampla gama e recorre a imagens sRGB.
A implementação atual no Chrome aceita as palavras-chave srgb
, p3
(gamut especificada
pelo espaço de cores DCI P3) e rec2020
(gamute especificada pelas
palavras-chave ITU-R
Recommendation BT.2020 Color Space). Confira o exemplo oficial (link em inglês).
Uso em 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 no 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 em 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 envio | Rastreador de status do Chrome | Bug do Chromium