Atualizações de áudio/vídeo no Chrome 58

Francisco Beaufort
François Beaufort
GitHub

Personalização dos controles de mídia

Os desenvolvedores agora 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
Figura 1. 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.

Por enquanto, a implementação atual é o 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 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 do Chromestatus | Bug do Chromium

A reprodução automática de Progressive Web Apps foi 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 melhorado "Adicionar à tela inicial" podem reproduzir automaticamente o áudio e o vídeo veiculados de 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>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Intent de envio | Rastreador do Chromestatus | Bug do Chromium

Pausar a reprodução automática do vídeo sem som quando estiver 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 começará a reproduzir o vídeo quando ele se tornar visível para o usuário.

A partir do Chrome 58, para reduzir o uso de energia, a reprodução de vídeos com o atributo autoplay será pausada quando estiver fora da tela e retomada quando estiver de volta, seguindo o comportamento do Safari no iOS.

Intent de envio | Rastreador do Chromestatus | Bug do Chromium

consulta de mídia da 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 cores, recomendamos que leia a postagem do blog Como melhorar a cor na Web (em inglês) do WebKit. Ele 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 substitui por imagens sRGB.

A implementação atual no Chrome aceita as palavras-chave srgb, p3 (gama especificada pelo Espaço de cores DCI P3) e rec2020 (gamut especificada pelas palavras-chave da recomendação ITU-R BT.2020). 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 do Chromestatus | Bug do Chromium