Neste artigo, falarei sobre os novos recursos de mídia do Chrome 73, que incluem:
- As teclas de mídia de hardware agora são compatíveis para controlar a reprodução de mídia. no computador.
- Os desenvolvedores Web podem consultar se uma determinada política HDCP pode ser aplicada.
- Picture-in-picture automático em PWAs para computador e Pular anúncio" in picture-in-picture estão chegando aos testes de origem.
- Os PWAs para computador têm reprodução automática com som.
Suporte a teclas de mídia de hardware
Atualmente, muitos teclados possuem teclas para controlar funções básicas de reprodução de mídia, como reproduzir/pausar, faixa anterior e próxima. Os fones de ouvido também têm. Até agora, Os usuários de computadores não podiam usar essas teclas de mídia para controlar a reprodução de áudio e vídeo no Chrome. Isso muda a partir de hoje!
Se o usuário pressionar a tecla de pausa, o elemento de mídia ativo em reprodução no Chrome ser pausada e receber uma mensagem "pausada" evento de mídia. Se a tecla de reprodução for pressionada, o elemento de mídia previamente pausado será retomado e receberá uma mídia evento. Ela funciona mesmo se o Chrome estiver em primeiro ou segundo plano.
No ChromeOS, os apps Android que usam foco de áudio agora vão pedir para o Chrome pausar e retomar o áudio para criar uma experiência de mídia integrada entre sites no Chrome Apps do Chrome e apps Android. No momento, isso só está disponível no ChromeOS dispositivo com o Android P.
Resumindo, é uma boa prática sempre ouvir esses eventos de mídia e agir de maneira adequada.
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
Mas não é só isso. Com a API Media Session agora disponível em computadores
antes, só havia suporte para dispositivos móveis. Os desenvolvedores Web cuidam de mídias
eventos relacionados, como a mudança de faixa acionada por teclas de mídia. A
eventos previoustrack
e nexttrack
são suportados no momento.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
As teclas de reprodução e pausa são processadas automaticamente pelo Chrome. No entanto, se o padrão não funcionar para você, ainda será possível definir alguns manipuladores de ação para “reproduzir” e "pausar" para evitar isso.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
O suporte a chaves de mídia de hardware está disponível no ChromeOS, no macOS e no Windows. Linux virá mais tarde.
Confira nossa documentação para desenvolvedores e confira a documentação de mídia oficial Amostras de sessão.
Rastreador Chromestatus | Bug do Chromium
Mídia criptografada: verificação de política HDCP
Graças à API HDCP Policy Check, agora os desenvolvedores da Web podem consultar se um uma política específica, por exemplo, requisito HDCP, pode ser aplicado antes da solicitação Licenças Widevine e carregamento de mídia.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
A API está disponível em todas as plataformas. No entanto, é possível que as verificações da política
que não estão disponíveis em determinadas plataformas. Por exemplo, a promessa de verificação de política HDCP
será rejeitada com NotSupportedError
no Android e no WebView do Android.
Confira nossa documentação anterior para desenvolvedores e experimente a versão oficial para ver todas as versões de HDCP compatíveis.
Intent de envio | Rastreador Chromestatus | Bug do Chromium
Teste de origem para picture-in-picture automático para PWAs instalados
Em algumas páginas, talvez você queira entrar e sair do modo Picture-in-picture automaticamente elemento de vídeo Por exemplo, apps da Web de videoconferência se beneficiariam de algumas comportamento de picture-in-picture automático quando o usuário alterna entre aplicativo da web e outros aplicativos ou guias. Infelizmente, isso não é possível com a requisito de gesto do usuário. Então, aí vem o picture-in-picture automático!
Para oferecer suporte a essa alternância entre guias e apps, um novo atributo autopictureinpicture
é adicionado ao elemento <video>
.
<video autopictureinpicture></video>
Veja como isso funciona:
- Quando o documento fica oculto, o elemento de vídeo em que
autopictureinpicture
foi definido mais recentemente entrará automaticamente no modo picture-in-picture se permitido. - Quando o documento se torna visível, o elemento de vídeo no modo picture-in-picture sair dela automaticamente.
Pronto. Observe que o recurso Picture-in-Picture automático se aplica apenas a Progressive Web Apps que os usuários instalaram no computador.
Confira a especificação para mais detalhes e tente usar o PWA oficial amostra.
Intenção de fazer experimentos | Rastreador Chromestatus | Bug do Chromium
Teste de origem para pular anúncio na janela picture-in-picture
O modelo de publicidade em vídeo geralmente consiste em anúncios precedentes. Conteúdo os provedores geralmente permitem pular o anúncio após alguns segundos. Infelizmente, como a janela picture-in-picture não é interativa, os usuários que assistem ao vídeo O recurso picture-in-picture não pode fazer isso hoje.
Com a API Media Session agora disponível em computadores, ela era compatível com
somente para dispositivos móveis antes), uma nova ação de sessão de mídia skipad
poderá ser usada para oferecer
em Picture-in-picture.
Para fornecer esse recurso, transmita uma função com skipad
ao chamar
setActionHandler()
. Para ocultá-lo, transmita null
. Como você pode ler abaixo, é
bastante simples.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
Experimente a opção oficial "Pular anúncio" amostra e informe como esse recurso pode pode ser melhorada.
Intenção de fazer experimentos | Rastreador Chromestatus | Bug do Chromium
Reprodução automática concedida para PWAs para computador
Agora que os Progressive Web Apps estão disponíveis em todas as plataformas para computador, estamos estendendo a regra do celular para o computador: reprodução automática com o som agora é permitido para PWAs instalados. Isso só se aplica a páginas em o escopo do manifesto do app da Web.