Atualizações de mídia no Chrome 75

François Beaufort

Os recursos de mídia do Chrome foram atualizados na versão 75. Neste artigo, vamos discutir esses novos recursos, que incluem:

• Prever se a reprodução será suave e eficiente em termos de energia para mídia criptografada.
• Suporte à dica de atributo playsInline do elemento de vídeo.

Mídia criptografada: informações de decodificação

Desde o Chrome 66, os desenvolvedores Web podem usar as Informações de decodificação para consultar o navegador sobre as capacidades claras de decodificação de conteúdo do dispositivo com base em informações como codecs, perfil, resolução, taxas de bits etc. Isso indica se a reprodução será suave (oportuna) e eficiente de energia com base nas estatísticas de reprodução anteriores gravadas pelo navegador.

A especificação da API Media Capabilities, que define as informações de decodificação, foi atualizada para processar configurações de mídia criptografada. Assim, os sites que usam mídia criptografada (EME) podem selecionar os streams de mídia ideais.

Confira como funciona a Decoding Info para EME. Teste o exemplo oficial.

const encryptedMediaConfig = {
  type: 'media-source', // or 'file'
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  },
  keySystemConfiguration: {
    keySystem: 'com.widevine.alpha',
    videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
  }
};

navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
  if (!result.supported) {
    console.log('Argh! This encrypted media configuration is not supported.');
    return;
  }

  if (!result.keySystemAccess) {
    console.log('Argh! Encrypted media support is not available.')
    return;
  }

  console.log('This encrypted media configuration is supported.');
  console.log('Playback should be' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');

  // TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});

As reproduções EME têm caminhos de código de decodificação e renderização especializados, o que significa suporte e desempenho de codecs diferentes em comparação com reproduções claras. Portanto, uma nova chave keySystemConfiguration precisa ser definida no objeto de configuração de mídia transmitido para navigator.mediaCapabilities.decodingInfo(). O valor dessa chave é um dicionário que contém vários tipos de EME conhecidos. Isso replica as entradas fornecidas para requestMediaKeySystemAccess() do EME com uma grande diferença: as sequências de entradas fornecidas para requestMediaKeySystemAccess() são simplificadas para um único valor sempre que a intenção da sequência era ter requestMediaKeySystemAccess() escolher um subconjunto compatível.

As informações de decodificação descrevem a qualidade (fluidez e eficiência de energia) do suporte a um único par de transmissões de áudio e vídeo sem tomar uma decisão para o autor da chamada. Os autores de chamadas ainda precisam solicitar configurações de mídia da mesma forma que com requestMediaKeySystemAccess(). Só que agora eles próprios estão na lista.

navigator.mediaCapabilities.decodingInfo() retorna uma promessa que é resolvida de forma assíncrona com um objeto que contém três booleanos: supported, smooth e powerEfficient. No entanto, quando uma chave keySystemConfiguration é definida e supported é true, outro objeto MediaKeySystemAccess chamado keySystemAccess também é retornado. Ele pode ser usado para solicitar algumas chaves de mídia e configurar a reprodução de mídia criptografada. Veja um exemplo:

// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
  navigator.mediaCapabilities.decodingInfo(mediaConfig)
);

// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
  if (result.supported && result.smooth) {
    bestConfig = result;
    break;
  }
}

if (bestConfig) {
  const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
  // TODO: rest of EME path as-is
} else {
  // Argh! No smooth configs found.
  // TODO: Maybe choose the lowest resolution and framerate available.
}

A decodificação de informações de mídia criptografada exige HTTPS.

Além disso, ele pode acionar uma solicitação de usuário no Android e no ChromeOS da mesma forma que requestMediaKeySystemAccess(). No entanto, ele não mostra mais solicitações do que requestMediaKeySystemAccess(), apesar de requerer mais chamadas para configurar a reprodução de mídia criptografada.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

HTMLVideoElement.playsInline

O Chrome agora oferece suporte ao atributo booleano playsInline. Se estiver presente, ele indica ao navegador que o vídeo precisa ser mostrado "inline" no documento por padrão, limitado à área de reprodução do elemento.

Da mesma forma que o Safari, em que os elementos de vídeo no iPhone não entram automaticamente no modo de tela cheia quando a reprodução começa, essa dica permite que alguns incorporadores tenham uma experiência de reprodução de vídeo em tela cheia automática. Os desenvolvedores da Web podem usar esse recurso para desativar essa experiência, se necessário.

<video playsinline></video>

Como o Chrome no Android e em computadores não implementa a tela cheia automática, a dica de atributo do elemento de vídeo playsInline não é usada.

Intent to Ship | Rastreador do Chromestatus | Bug do Chromium