En este artículo, analizaremos las nuevas funciones multimedia de Chrome 73, que incluyen lo siguiente:
- Las teclas multimedia de hardware ahora son compatibles para controlar la reproducción de contenido multimedia en computadoras de escritorio.
- Los desarrolladores web pueden consultar si se puede aplicar una política HDCP determinada.
- La función Pantalla en pantalla automática en las AWP de computadoras de escritorio y “Omitir anuncio” en la función pantalla en pantalla estarán disponibles en las pruebas de origen.
- A las AWP de escritorio se les otorga reproducción automática con sonido.
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.
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.
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.