Actualizaciones multimedia en Chrome 73

François Beaufort
François Beaufort

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

Compatibilidad con claves multimedia de hardware

Actualmente, muchos teclados tienen teclas para controlar funciones básicas de reproducción de contenido multimedia, como reproducir y pausar, las pistas anterior y siguiente. Los auriculares también las tienen. Hasta ahora, los usuarios de computadoras de escritorio 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 se detendrá y recibirá un evento multimedia de "pausado". Si se presiona la tecla de reproducción, el elemento multimedia detenido se reanudará y recibirá un evento multimedia de "reproducir". Funciona aunque Chrome esté en primer o segundo plano.

En ChromeOS, las apps para Android que usan foco de audio ahora le indicarán a Chrome que pause y reanude el audio para crear una experiencia multimedia fluida entre sitios web en Chrome, las apps de Chrome y las apps para Android. Actualmente, esto solo se admite en dispositivos ChromeOS con Android P.

En resumen, te recomendamos que siempre escuches estos eventos multimedia y actúes en consecuencia.

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 que ahora está disponible en computadoras de escritorio (antes solo se admitía en dispositivos móviles), los desarrolladores web pueden controlar eventos relacionados con contenido multimedia, como los cambios de segmento que se activan con las teclas multimedia. 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 administra automáticamente las teclas de reproducción y pausa. Sin embargo, si el comportamiento predeterminado no funciona, puedes configurar algunos controladores de acciones para "reproducir" y "pausar" a fin de evitarlo.

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

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

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

Consulta nuestra documentación para desarrolladores existente y prueba las muestras oficiales de sesiones multimedia.

Seguimiento de Chromestatus | Error de Chromium

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

Gracias a la API de verificación de políticas de HDCP, los desarrolladores web ahora pueden consultar si se puede aplicar una política específica, p.ej., un requisito de HDCP, antes de solicitar licencias de Widevine y cargar medios.

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, es posible que las verificaciones reales de las políticas no estén disponibles en ciertas plataformas. Por ejemplo, la promesa de verificación de política HDCP se rechazará con NotSupportedError en Android y WebView de Android.

Consulta la documentación anterior para desarrolladores y prueba la muestra oficial para ver todas las versiones de HDCP compatibles.

Intent de enviar | Seguimiento de Chromestatus | Error de Chromium

Prueba de origen para pantalla en pantalla automática para AWP instaladas

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

Para admitir estos cambios de pestañas y apps, se agrega un nuevo atributo autopictureinpicture al elemento <video>.

<video autopictureinpicture></video>

Funciona de la siguiente manera:

  • Cuando se oculta el documento, el elemento de video cuyo atributo autopictureinpicture se configuró más recientemente entra en pantalla en pantalla automáticamente, si se permite.
  • Cuando el documento se vuelve visible, el elemento de video en el modo pantalla en pantalla lo abandona automáticamente.

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

Consulta la spec para obtener más detalles y prueba con la muestra de AWP oficial.

Intent de experimentar | Seguimiento de Chromestatus | Error de Chromium

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

El modelo de anuncio de video generalmente consta de anuncios previos al video. Los proveedores de contenido suelen ofrecer la posibilidad de omitir el anuncio después de unos segundos. Por desgracia, dado que la ventana de pantalla en pantalla no es interactiva, los usuarios que miran un video en este modo no pueden realizar esta acción actualmente.

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

Botón Omitir anuncio en la ventana pantalla en pantalla
Botón "Omitir anuncio" en la ventana pantalla en pantalla

Para proporcionar esta función, pasa una función con skipad cuando llames a setActionHandler(). Para ocultarla, 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 el ejemplo oficial de "Omitir anuncio" y comunícanos cómo podemos mejorar esta función.

Intent de experimentar | Seguimiento de Chromestatus | Error de Chromium

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, extendimos la regla que teníamos en los dispositivos móviles a las computadoras: la reproducción automática con sonido ahora está permitida para las AWP instaladas. Ten en cuenta que solo se aplica a páginas dentro del alcance del manifiesto de la aplicación web.

Error de Chromium