En este artículo, analizaré las nuevas funciones multimedia de Chrome 73, que incluyen las siguientes:
- Ahora se admiten las teclas multimedia de hardware para controlar la reproducción de contenido multimedia en computadoras de escritorio.
- Los desarrolladores web pueden consultar si se puede aplicar una política de HDCP específica.
- El modo de pantalla en pantalla automático en las AWP para computadoras de escritorio y la opción "Omitir anuncio" en el modo de pantalla en pantalla llegarán a las pruebas de origen.
- Las AWP para computadoras de escritorio tienen habilitada la reproducción automática con sonido.
Compatibilidad con teclas multimedia de hardware
Hoy en día, muchos teclados tienen teclas para controlar funciones básicas de reproducción multimedia, como reproducir y pausar, pista anterior y pista siguiente. Los auriculares también los 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 cambiará hoy.
Si el usuario presiona la tecla de pausa, se detendrá el elemento multimedia activo que se reproduce en Chrome y recibirá un evento multimedia "pausado". Si se presiona la tecla de reproducción, se reanudará el elemento multimedia pausado anteriormente y recibirá un evento multimedia de "reproducción". Funciona independientemente de si Chrome está en primer o segundo plano.
En ChromeOS, las apps para Android que usan el enfoque de audio ahora le indicarán a Chrome que pause y reanude el audio para crear una experiencia multimedia fluida entre los sitios web en Chrome, las apps para Chrome y las apps para Android. Por el momento, solo es compatible con dispositivos ChromeOS que ejecutan Android P.
En resumen, es recomendable escuchar siempre estos eventos multimedia y actuar 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. Ahora que la API de Media Session está disponible en computadoras (antes solo se admitía en dispositivos móviles), los desarrolladores web pueden controlar eventos relacionados con el contenido multimedia, como el cambio de pista que activan las teclas multimedia. Actualmente, 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 el comportamiento predeterminado no te funciona, puedes configurar 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 con teclas multimedia de hardware está disponible en ChromeOS, macOS y Windows. Linux llegará más adelante.
Consulta nuestra documentación para desarrolladores existente y prueba las muestras oficiales de Media Session.
Chromestatus Tracker | Error de Chromium
Contenido multimedia encriptado: Verificación de la política de 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 contenido 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, es posible que las verificaciones de políticas reales no estén disponibles en ciertas plataformas. Por ejemplo, la promesa de verificación de la política de HDCP se rechazará con NotSupportedError en Android y Android WebView.
Consulta nuestra documentación para desarrolladores anterior y prueba el ejemplo oficial para ver todas las versiones de HDCP compatibles.
Intent to Ship | Chromestatus Tracker | Error de Chromium
Prueba de origen para el modo de pantalla en pantalla automático para AWP instaladas
Es posible que algunas páginas deseen ingresar y salir automáticamente del modo de pantalla en pantalla para un elemento de video. Por ejemplo, las aplicaciones web de videoconferencia se beneficiarían de un comportamiento automático de pantalla en pantalla cuando el usuario cambia entre la aplicación web y otras aplicaciones o pestañas. Lamentablemente, esto no es posible con el requisito de gesto del usuario. Así que, ¡aquí está la pantalla en pantalla automática!
Para admitir este cambio de pestaña y de app, se agrega un nuevo atributo autopictureinpicture al elemento <video>.
<video autopictureinpicture></video>
A continuación, te indicamos cómo funciona:
- Cuando el documento se oculta, el elemento de video cuyo atributo
autopictureinpicturese configuró más recientemente entra automáticamente en modo Picture-in-Picture, si está permitido. - Cuando el documento se hace visible, el elemento de video en pantalla en miniatura 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 computadoras de escritorio.
Consulta la especificación para obtener más detalles y prueba el ejemplo oficial de la AWP.
Intent to Experiment | Chromestatus Tracker | Chromium Bug
Prueba de origen para omitir anuncios en la ventana de pantalla en pantalla
El modelo de anuncio de video suele constar de anuncios previos al video. Los proveedores de contenido a menudo ofrecen la posibilidad de omitir el anuncio después de unos segundos. Lamentablemente, como la ventana de pantalla en pantalla no es interactiva, los usuarios que miran un video en pantalla en pantalla no pueden hacerlo en la actualidad.
Ahora que la API de Media Session está disponible en computadoras (antes solo se admitía en dispositivos móviles), se puede usar una nueva acción de sesión multimedia skipad para ofrecer esta opción en Pantalla en pantalla.
Para proporcionar esta función, pasa una función con skipad cuando llames a 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 el ejemplo oficial de "Omitir anuncio" y comunícate con nosotros para informarnos cómo se puede mejorar esta función.
Intent to Experiment | Chromestatus Tracker | Chromium Bug
Se otorgó la reproducción automática para las AWP para computadoras
Ahora que las aplicaciones web progresivas están disponibles en todas las plataformas de computadoras de escritorio, estamos extendiendo la regla que teníamos en dispositivos móviles a las computadoras: ahora se permite la reproducción automática con sonido para las AWP instaladas. Ten en cuenta que solo se aplica a las páginas del alcance del manifiesto de la app web.