Personnalisez les notifications multimédias et les commandes de lecture avec l'API Media Session

Cómo integrarse con teclas de medios de Matériel, personalizar notificaciones de medios y más.

6 mars 2020
Mise à jour 13 août 2020

Para que los usuarios sepan lo que se está reproduciendo actualmente en su le navigateur y lo controlen sin volver a la página que lo inició, se ha introducido la API de sesión multimedia. Permite a los desarrolladores la toile personalizar esta experiencia a través de métadonnées en notificaciones multimedia personalizadas y eventos multimedia como reproducción, pausa e incluso búsqueda y cambio de seguimiento. Estas personalizaciones están disponibles en varios contextos, incluidos centros de medios de escritorio, notificaciones de medios en dispositivos móviles e incluso en dispositivos portátiles. Describiré estas personalizaciones en este artículo.

Compatibilidad con varios navigateurs

Au moment de la rédaction de cet article, Chrome est le seul navigateur qui prend en charge l'API Media Session sur les ordinateurs de bureau et les appareils mobiles. Firefox a une prise en charge partielle de l'API Media Session sur le bureau derrière un drapeau, et Samsung Internet a également une prise en charge partielle. Regarder Compatibilité du navigateur
pour des informations à jour.

L'API Media Session offre plusieurs avantages et fonctionnalités:

• Les clés multimédias matérielles sont prises en charge.
• Les notifications multimédias sont personnalisées sur les appareils mobiles, Chrome OS et les appareils portables associés.
• Les centre des médias est disponible sur le bureau.
• Les commandes multimédias de l'écran de verrouillage sont disponibles dans Système d'exploitation Chrome et mobile.
• Les commandes de la fenêtre Picture-in-Picture sont disponibles.
• L'intégration de l'assistant mobile est disponible.

Quelques exemples illustreront certains de ces points.

Exemple 1: Si los usuarios presionan la tecla multimedia «siguiente pista» de su teclado, los desarrolladores web pueden manejar esta acción del Nom d'utilisateur, déjà être que Chrome esté en primer plano o en segundo plano.

Exemple 2: Si los usuarios escuchan un Podcast en la web mientras la pantalla de su dispositivo está bloqueada, aún pueden presionar el ícono «buscar hacia atrás» en los controles de medios de la pantalla de bloqueo para que los desarrolladores web muevan el tiempo de reproducción hacia atrás unos segundos.

Exemple 3: Si les utilisateurs ont des onglets qui lisent de l'audio, ils peuvent facilement arrêter la lecture à partir du centre multimédia sur le bureau afin que les développeurs Web aient la possibilité d'effacer leur statut.

Tout cela se fait via deux interfaces différentes: MediaSession interface et MediaMetadata Interface. Le premier permet aux utilisateurs de contrôler ce qui est en cours de lecture. Le second est comme tu le dis MediaSession ce qui doit être contrôlé.

À titre d'illustration, l'image suivante montre comment ces interfaces sont liées à des contrôles multimédias spécifiques, dans ce cas une notification multimédia sur mobile.

Faites savoir aux utilisateurs à quoi cela ressemble

Lorsqu'un site Web lit de l'audio ou de la vidéo, les utilisateurs reçoivent automatiquement des notifications multimédias, soit dans la barre de notification sur l'appareil mobile, soit dans le centre multimédia sur le bureau. Chrome fait de son mieux pour afficher les informations appropriées en utilisant le titre du document et la plus grande image d'icône qu'il peut trouver. Avec l'API Media Session, il est possible de personnaliser la notification multimédia avec des métadonnées multimédias plus riches, telles que le titre, le nom de l'artiste, le nom de l'album et l'illustration, comme indiqué ci-dessous.

Chrome demande l'approche audio "complète" pour afficher les notifications multimédias uniquement lorsque la durée du contenu multimédia est au moins 5 secondes. Cela garantit que les sons accidentels tels que les dings n'affichent pas de notifications.

attendre document.querySelector("video").play();
si ("mediaSession" dans navigateur) {
navigateur.mediaSession.métadonnées = new MediaMetadata({
Titre: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://dummyimage.com/96x96',   les tailles: '96x96',   taper: 'image/png' },
{ src: 'https://dummyimage.com/128x128', les tailles: '128x128', taper: 'image/png' },
{ src: 'https://dummyimage.com/192x192', les tailles: '192x192', taper: 'image/png' },
{ src: 'https://dummyimage.com/256x256', les tailles: '256x256', taper: 'image/png' },
{ src: 'https://dummyimage.com/384x384', les tailles: '384x384', taper: 'image/png' },
{ src: 'https://dummyimage.com/512x512', les tailles: '512x512', taper: 'image/png' },
]
});

}

À la fin de la lecture, il n'est pas nécessaire de «libérer» la session multimédia, car la notification disparaîtra automatiquement. Garde cela à l'esprit
navigator.mediaSession.metadata sera utilisé au démarrage de la lecture suivante. C'est pourquoi il est important de le mettre à jour lorsque vous modifiez la source de lecture multimédia pour vous assurer que les informations pertinentes sont affichées dans la notification multimédia.

Il y a quelques points à garder à l'esprit concernant les métadonnées multimédias.

• La matriz de material gráfico de notificación admite URL de blobs y URL de datos.
• Si aucune illustration n'est définie et qu'il y a une image d'icône (spécifiée par ) à une taille souhaitable, les notifications multimédias l'utiliseront.
• La taille cible de l'illustration de notification dans Chrome pour Android est 512 x 512. Pour les appareils bas de gamme, c'est 256 x 256.
• Les Titre le attribut del elemento HTML multimedia se utiliza en el widget macOS «Reproduciendo ahora».
• Si el recurso de medios está incrustado (por ejemplo, en un iframe), la información de la API de sesión de medios debe establecerse desde el contexto incrustado. Vea el fragmento a continuación.

<iframe id="iframe">
<vidéo>...</vidéo>
</iframe>
<scénario>
iframe.contentWindow.navigateur.mediaSession.métadonnées = new MediaMetadata({
Titre: 'Never Gonna Give You Up',
...
});
</scénario>

Laisser les utilisateurs contrôler ce qui joue

Une action de session multimédia est une action (par exemple, «lire» ou «mettre en pause») qu'un site Web peut gérer pour les utilisateurs lorsqu'ils interagissent avec le lecteur multimédia actuel. Les actions sont analogues aux événements et fonctionnent de la même manière. Comme les événements, les actions sont implémentées en définissant des gestionnaires sur un objet approprié, une instance de
MediaSession, dans ce cas. Certaines actions sont déclenchées lorsque les utilisateurs appuient sur les boutons d'un casque, d'un autre appareil distant, d'un clavier ou interagissent avec une notification multimédia.

Étant donné que certaines actions de la session multimédia peuvent ne pas être prises en charge, il est recommandé d'utiliser un essayer… attraper bloquer lors de la configuration.

const actionHandlers = [
['play',          () => {  }],
['pause',         () => {  }],
['previoustrack', () => {  }],
['nexttrack',     () => {  }],
['stop',          () => {  }],
['seekbackward',  (des détails) => {  }],
['seekforward',   (des détails) => {  }],
['seekto',        (des détails) => {  }],
];
pour (const [action, handler] of actionHandlers) {
try {
navigateur.mediaSession.setActionHandler(action, handler);
} catch (Erreur) {
console.Journal(`The media session action "${action}" is not supported yet.`);
}
}

Annuler la configuration d'un gestionnaire d'actions de session multimédia est aussi simple que de le configurer dans nul.

try {
navigateur.mediaSession.setActionHandler("piste suivante", nul);
} catch (Erreur) {
console.Journal(`The media session action "nexttrack" is not supported yet.`);
}

Una vez configurados, los controladores de acciones de la sesión multimedia persistirán durante las reproducciones multimedia. Esto es similar al patrón de escucha de eventos, excepto que manejar un un événement significa que el navegador deja de realizar cualquier comportamiento predeterminado y lo usa como una señal de que el sitio web admite la acción de los medios. Por lo tanto, los controles de acción de los medios no se mostrarán a menos que se establezca el controlador de acción adecuado.

Jouer pause

Les "jouer" l'action indique que l'utilisateur souhaite reprendre la lecture multimédia pendant que "pause" indique un désir de l'arrêter temporairement.

L'icône «lecture / pause» est toujours affichée dans une notification multimédia et les événements multimédias associés sont automatiquement gérés par le navigateur. Pour remplacer son comportement par défaut, gérez les actions multimédias «lecture» et «pause» comme indiqué ci-dessous.

Le navigateur peut considérer qu'un site Web ne lit pas de contenu multimédia lors de la recherche ou du chargement, par exemple. Dans ce cas, remplacez ce comportement en définissant
navigator.mediaSession.playbackState à "en jouant" ou "mis en pause" para asegurarse de que la interface utilisateur del sitio web se mantenga sincronizada con los controles de notificación de medios.

navigateur.mediaSession.setActionHandler("jouer", asynchrone () => {
attendre document.querySelector("video").play();
navigateur.mediaSession.playbackState = "en jouant";
});
navigateur.mediaSession.setActionHandler("pause", () => {
document.querySelector("video").pause();
navigateur.mediaSession.playbackState = "mis en pause";
});

Piste précédente

Les "prevustrack" L'action indique que l'utilisateur souhaite démarrer la lecture multimédia en cours depuis le début si la lecture multimédia a une notion de début, ou aller à l'élément précédent dans la liste de lecture si la lecture multimédia a une notion de liste de lecture.

navigateur.mediaSession.setActionHandler("prevustrack", () => {
});

Piste suivante

Les "piste suivante" L'action indique que l'utilisateur souhaite déplacer la lecture multimédia vers l'élément suivant dans la liste de lecture si la lecture multimédia a une notion de liste de lecture.

navigateur.mediaSession.setActionHandler("piste suivante", () => {
});

Arrêter

Les "arrêter" L'action indique que l'utilisateur souhaite arrêter la lecture multimédia et effacer l'état le cas échéant.

navigateur.mediaSession.setActionHandler("arrêter", () => {
});

Rechercher en arrière / en avant

Les "chercher en arrière" L'action indique que l'utilisateur souhaite rembobiner le temps de lecture du média pendant une courte période. "rechercher" indique le désir d'avancer brièvement la durée de lecture du média. Dans les deux cas, une courte période signifie quelques secondes.

Les seekOffset La valeur fournie dans le gestionnaire d'actions est le temps en secondes pour passer le temps de lecture multimédia. Si non fourni (par exemple indéfini), vous devez utiliser un temps raisonnable (par exemple, 10 à 30 secondes).

const vidéo = document.querySelector('video');
const defaultSkipTime = 10; 
navigateur.mediaSession.setActionHandler("chercher en arrière", (des détails) => {
const skipTime = des détails.seekOffset || defaultSkipTime;
vidéo.currentTime = Math.max(vidéo.currentTime - skipTime, 0);
});
navigateur.mediaSession.setActionHandler("rechercher", (des détails) => {
const skipTime = des détails.seekOffset || defaultSkipTime;
vidéo.currentTime = Math.min(vidéo.currentTime + skipTime, vidéo.duration);
});

Cherchez un moment précis

Les "chercher à" L'action indique que l'utilisateur souhaite déplacer la durée de lecture du média vers une heure spécifique.

Les trouver du temps La valeur fournie dans le gestionnaire d'actions est le temps en secondes pour déplacer le temps de lecture multimédia.

Les rapideSeek La valeur booléenne fournie dans le gestionnaire d'actions est true si l'action est appelée plusieurs fois dans le cadre d'une séquence et qu'il ne s'agit pas du dernier appel de cette séquence.

const vidéo = document.querySelector('video');
navigateur.mediaSession.setActionHandler("chercher à",(des détails) => {
si (des détails.rapideSeek && "fastSeek" dans vidéo) {
vidéo.rapideSeek(des détails.trouver du temps);
revenir;
}
vidéo.currentTime = des détails.trouver du temps;
});

Réglez la position de lecture

L'affichage précis de la position de lecture multimédia dans une notification est aussi simple que de définir l'état de la position au moment approprié, comme indiqué ci-dessous. L'état de la position est une combinaison de la vitesse de lecture multimédia, de la durée et de l'heure actuelle.

const vidéo = document.querySelector("video");
une fonction updatePositionState() {
si ("setPositionState" dans navigateur.mediaSession) {
navigateur.mediaSession.setPositionState({
duration: vidéo.duration,
playbackRate: vidéo.playbackRate,
position: vidéo.currentTime
});
}
}

attendre vidéo.play();
updatePositionState();

navigateur.mediaSession.setActionHandler("chercher en arrière", des détails => {
updatePositionState();
});

navigateur.mediaSession.setActionHandler("rechercher", des détails => {
updatePositionState();
});

navigateur.mediaSession.setActionHandler("chercher à", des détails => {
updatePositionState();
});

vidéo.addEventListener("ratechange", un événement => {
updatePositionState();
});

La réinitialisation de l'état de la position est aussi simple que de la régler sur nul.

navigateur.mediaSession.setPositionState(nul);

Échantillons

Regardez quelques Exemples de sessions médias en présentant Fondation Blender y
Œuvre de Jan Morgenstern.

Ressources