Atualizações de mídia no Chrome 58

François Beaufort
François Beaufort
GitHub

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.

Controles de mídia nativos no Chrome 58
Controles de mídia nativos no Chrome 58

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.

A implementação atual é um mecanismo de lista de bloqueio em controles nativos com a capacidade de defini-los diretamente do conteúdo HTML usando o novo atributo controlsList. Confira a amostra oficial.

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

Intenção de envio | Rastreador do Chromestatus | Bug do Chromium

Reprodução automática para Progressive Web Apps adicionada à tela inicial

Antes, o Chrome bloqueava 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 Adicionar à tela inicial aprimorado podem reproduzir automaticamente áudio e vídeo fornecidos de origens incluídas no escopo do manifesto do web app sem restrições.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
O que fazer
<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.

O que não fazer
<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.

Intenção de envio | Rastreador do Chromestatus | Bug do Chromium

Pausar o vídeo com reprodução automática e som desativado quando ele estiver invisível

Como você já deve saber, o Chrome no Android permite que os vídeos muted comecem a ser reproduzidos sem interação do usuário. Se um vídeo for marcado como muted e tiver o atributo autoplay, o Chrome vai começar a reproduzir o conteúdo 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 estiver fora da tela e retomada quando voltar à visualização, seguindo o comportamento do Safari iOS."

Intenção de envio | Rastreador do Chromestatus | Bug do Chromium

consulta de mídia color-gamut

À medida que as telas de ampla gama de cores se tornam mais populares, os sites agora podem acessar o intervalo aproximado de cores compatíveis com o Chrome e 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 cor, perfil de cor, gama, ampla gama e profundidade de cor, recomendo ler a postagem do blog do WebKit Improving Color on the Web (em inglês). Ele detalha como usar a consulta de mídia color-gamut para veicular imagens de ampla gama quando o usuário está em telas de ampla gama e volta para imagens sRGB caso contrário.

A implementação atual no Chrome aceita as palavras-chave srgb, p3 (gama especificada pelo espaço de cores DCI P3) e rec2020 (gama especificada pelo espaço de cores da recomendação BT.2020 da ITU-R). Confira a amostra oficial.

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 em 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")';
}

Intenção de envio | Rastreador do Chromestatus | Bug do Chromium