Actualizaciones multimedia en Chrome 73

François Beaufort
François Beaufort
GitHub

En este artículo, analizaremos las nuevas funciones multimedia de Chrome 73, que incluyen lo siguiente:

Compatibilidad con teclas multimedia de hardware

Muchos teclados actualmente tienen teclas para controlar las funciones básicas de reproducción de contenido multimedia, como como reproducir/pausar, pista anterior y siguiente. Los auriculares también las tienen. Hasta ahora, los usuarios de computadoras no podían usar estas teclas multimedia para controlar la reproducción de audio y video en Chrome. Esto cambia hoy.

Teclas multimedia del teclado
Teclas multimedia del teclado
.

Si el usuario presiona la tecla de pausa, el elemento multimedia activo que se reproduce en Chrome detenerse y recibir una indicación "detenida" evento multimedia. Si se presiona la tecla Reproducir, el ícono el elemento multimedia que se detuvo anteriormente se reanudará y se "reproducirá" multimedia para cada evento. Funciona tanto con Chrome en primer o segundo plano.

En ChromeOS, las apps para Android que usen foco de audio ahora le indicarán a Chrome que pause y reanudar el audio para crear una experiencia multimedia fluida entre sitios web en Chrome Apps de Chrome y apps para Android. Actualmente, esta función solo se admite en ChromeOS dispositivo con Android P.

En resumen, es una buena práctica escuchar siempre estos eventos de medios según corresponda.

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.
});

Espera, hay más calcomanías. Con la API de Media Session, ahora disponible en computadoras (antes solo se admitía en dispositivos móviles), los desarrolladores web pueden encargarse de los medios eventos relacionados, como el cambio de pista que se activa mediante teclas multimedia. El por el momento, se admiten los eventos previoustrack y nexttrack.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Chrome controla automáticamente las teclas de reproducción y pausa. Sin embargo, si la configuración predeterminada no funciona, puedes establecer algunos controladores de acciones para "reproducir" y "pausar" para evitar esto.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

La compatibilidad de las teclas multimedia de hardware está disponible en ChromeOS, macOS y Windows. Linux más adelante.

Consulta nuestra documentación para desarrolladores existente y prueba los contenido multimedia oficiales. Muestras de sesión.

Seguimiento de Chromestatus | Error de Chromium

Medios encriptados: comprobación de la política HDCP

Gracias a la API de Policy Check de HDCP, los desarrolladores web ahora pueden consultar una política específica, p.ej., Requisito de HDCP. Se puede aplicar antes de realizar una solicitud. las licencias de Widevine y la carga de archivos multimedia,

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

La API está disponible en todas las plataformas. Sin embargo, las verificaciones de políticas reales no estar disponible en ciertas plataformas. Por ejemplo, la promesa de verificación de la política HDCP se rechazará con NotSupportedError en Android y WebView de Android.

Consulta nuestra documentación anterior para desarrolladores y prueba la página ejemplo para ver todas las versiones HDCP compatibles.

Intent de envío | Seguimiento de Chromestatus | Error de Chromium

Prueba de origen para la función pantalla en pantalla automática de las AWP instaladas

Es posible que algunas páginas quieran ingresar automáticamente y dejar la opción Pantalla en pantalla para un elemento de video; por ejemplo, las aplicaciones web de videoconferencia se beneficiarían de algunas comportamiento automático de pantalla en pantalla cuando el usuario alterna entre la aplicación web y otras aplicaciones o pestañas. Lamentablemente, esto no es posible con la requisito de gestos del usuario. Aquí viene la función Pantalla en pantalla automática.

Para admitir el cambio de pestañas y apps, se agregó un nuevo atributo autopictureinpicture se agrega al elemento <video>.

<video autopictureinpicture></video>

A continuación, te mostramos cómo funciona a grandes rasgos:

  • Cuando se oculta el documento, el elemento de video cuyo autopictureinpicture más recientemente se establecerá automáticamente en el modo de pantalla en pantalla si por lo que está permitido.
  • Cuando el documento se vuelve visible, el elemento de video en el modo de pantalla en pantalla lo abandona automáticamente.

Eso es todo. Ten en cuenta que la función Pantalla en pantalla automática solo se aplica a Apps web progresivas que los usuarios instalaron en la computadora de escritorio.

Revisa las especificaciones para obtener más detalles y prueba usar la AWP oficial de muestra.

Intención de experimentar | Seguimiento de Chromestatus | Error de Chromium

Prueba de origen para omitir anuncio en la ventana de pantalla en pantalla

El modelo de anuncios de video suele estar compuesto por anuncios previos al video. Contenido Los proveedores de servicios en la nube suelen ofrecer la posibilidad de omitir el anuncio después de unos segundos. Lamentablemente, ya que la ventana de pantalla en pantalla no es interactiva, los usuarios que miran un video en La función pantalla en pantalla no puede hacer esto hoy.

Ahora, la API de Media Session está disponible en computadoras de escritorio (era compatible con solo en dispositivos móviles antes), se puede usar una nueva acción de la sesión multimedia skipad para ofrecer esto. en Pantalla en pantalla.

Botón Omitir anuncio en la ventana de pantalla en pantalla
"Omitir anuncio" botón en la ventana Pantalla en pantalla
.

Para proporcionar esta función, pasa una función con skipad cuando llames setActionHandler() Para ocultarlo, pasa null. Como puedes leer a continuación, es bastante sencillo.

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.
}

Prueba la función "Omitir anuncio" oficial muestra y cuéntanos cómo esta función puede que se pueden mejorar.

Intención de experimentar | Seguimiento de Chromestatus | Error de Chromium

Se otorgó la reproducción automática para las AWP de computadoras de escritorio

Ahora que las apps web progresivas están disponibles en todas las plataformas de escritorio, extenderemos la regla de los dispositivos móviles a las computadoras: la reproducción automática con el sonido ahora está permitido para las AWP instaladas. Ten en cuenta que solo se aplica a las páginas de El alcance del manifiesto de la app web.

Error de Chromium