Cómo integrarse con teclas de medios de Hardware-, personalizar notificaciones de medios y más.
Aktualisiert
Para que los usuarios sepan lo que se está reproduciendo actualmente en su Browser 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 Netz personalizar esta experiencia a través de Metadaten 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 Browser
Zum Zeitpunkt des Schreibens ist Chrome der einzige Browser, der die Mediensitzungs-API sowohl auf Desktop- als auch auf Mobilgeräten unterstützt. Firefox unterstützt teilweise die Mediensitzungs-API auf dem Desktop hinter einem Flag, und Samsung Internet bietet auch teilweise Unterstützung. Uhr Browser-Kompatibilität
für aktuelle Informationen.
Die Media Session API bietet verschiedene Vorteile und Funktionen:
- Hardwaremedienschlüssel werden unterstützt.
- Medienbenachrichtigungen werden auf Mobilgeräten, Chrome OS und gekoppelten tragbaren Geräten personalisiert.
- das Media Center ist auf dem Desktop verfügbar.
- Mediensteuerelemente für Sperrbildschirme sind in verfügbar Chrome-Betriebssystem und mobil.
- Bild-in-Bild-Fenstersteuerelemente sind verfügbar.
- Die Integration des mobilen Assistenten ist verfügbar.
Einige Beispiele veranschaulichen einige dieser Punkte.
Beispiel 1: Si los usuarios presionan la tecla multimedia «siguiente pista» de su teclado, los desarrolladores web pueden manejar esta acción del Nutzername, bereits Sein que Chrome esté en primer plano o en segundo plano.
Beispiel 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.
Beispiel 3: Wenn Benutzer über Registerkarten verfügen, auf denen Audio abgespielt werden kann, können sie die Wiedergabe vom Media Center auf dem Desktop aus problemlos stoppen, sodass Webentwickler die Möglichkeit haben, ihren Status zu löschen.
All dies erfolgt über zwei verschiedene Schnittstellen: MediaSession Schnittstelle und MediaMetadata Schnittstelle. Mit dem ersten können Benutzer steuern, was gerade abgespielt wird. Der zweite ist wie du sagst MediaSession was kontrolliert werden muss.
Zur Veranschaulichung zeigt das folgende Bild, wie sich diese Schnittstellen auf bestimmte Mediensteuerelemente beziehen, in diesem Fall eine Medienbenachrichtigung auf Mobilgeräten.
Lassen Sie die Benutzer wissen, wie es sich anhört
Wenn eine Website Audio oder Video wiedergibt, erhalten Benutzer automatisch Medienbenachrichtigungen, entweder in der Benachrichtigungsleiste auf dem Mobilgerät oder im Media Center auf dem Desktop. Chrome bemüht sich, die richtigen Informationen anhand des Dokumenttitels und des größten Symbolbilds anzuzeigen, das es finden kann. Mit der Mediensitzungs-API ist es möglich, die Medienbenachrichtigung mit einigen umfangreicheren Medienmetadaten wie Titel, Künstlername, Albumname und Bildmaterial anzupassen, wie unten gezeigt.
Chrome fordert den "vollständigen" Audio-Ansatz an, Medienbenachrichtigungen nur dann anzuzeigen, wenn die Dauer des Mediums beträgt mindestens 5 Sekunden. Dies stellt sicher, dass zufällige Geräusche wie Dings keine Benachrichtigungen anzeigen.
erwarten Dokument.querySelector("video").play();wenn ("mediaSession" im Navigator) {
Navigator.mediaSession.Metadaten = new MediaMetadata({
Titel: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://dummyimage.com/96x96', Größen: '96x96', Art: 'image/png' },
{ src: 'https://dummyimage.com/128x128', Größen: '128x128', Art: 'image/png' },
{ src: 'https://dummyimage.com/192x192', Größen: '192x192', Art: 'image/png' },
{ src: 'https://dummyimage.com/256x256', Größen: '256x256', Art: 'image/png' },
{ src: 'https://dummyimage.com/384x384', Größen: '384x384', Art: 'image/png' },
{ src: 'https://dummyimage.com/512x512', Größen: '512x512', Art: 'image/png' },
]
});
}
Wenn die Wiedergabe endet, muss die Mediensitzung nicht "freigegeben" werden, da die Benachrichtigung automatisch ausgeblendet wird. Behalt das im Kopf
navigator.mediaSession.metadata wird verwendet, wenn die nächste Wiedergabe beginnt. Aus diesem Grund ist es wichtig, diese zu aktualisieren, wenn Sie die Quelle für die Medienwiedergabe ändern, um sicherzustellen, dass relevante Informationen in der Medienbenachrichtigung angezeigt werden.
Bei Medienmetadaten sind einige Dinge zu beachten.
- La matriz de material gráfico de notificación admite Url de blobs y URL de datos.
- Wenn kein Bildmaterial definiert ist und ein Symbolbild vorhanden ist (angegeben durch
) in einer gewünschten Größe wird es von Medienbenachrichtigungen verwendet. - Die Zielgröße für Benachrichtigungsgrafiken in Chrome für Android ist
512 x 512. Für Low-End-Geräte ist es256 x 256. - das
TitelDas 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">
<Video>...</Video>
</iframe>
<Skript>
iframe.contentWindow.Navigator.mediaSession.Metadaten = new MediaMetadata({
Titel: 'Never Gonna Give You Up',
...
});
</Skript>Lassen Sie Benutzer steuern, was abgespielt wird
Eine Mediensitzungsaktion ist eine Aktion (z. B. "Wiedergabe" oder "Pause"), die eine Website für Benutzer ausführen kann, wenn sie mit dem aktuellen Media Player interagieren. Aktionen sind analog zu Ereignissen und funktionieren auf die gleiche Weise. Wie Ereignisse werden Aktionen implementiert, indem Handler für ein geeignetes Objekt, eine Instanz von, festgelegt werden
MediaSession, in diesem Fall. Einige Aktionen werden ausgelöst, wenn Benutzer Tasten eines Headsets, eines anderen Remote-Geräts oder einer Tastatur drücken oder mit einer Medienbenachrichtigung interagieren.
Da einige Aktionen in der Mediensitzung möglicherweise nicht unterstützt werden, wird empfohlen, a zu verwenden versuche ... zu fangen Block bei der Konfiguration.
const actionHandlers = [
['play', () => { }],
['pause', () => { }],
['previoustrack', () => { }],
['nexttrack', () => { }],
['stop', () => { }],
['seekbackward', (Einzelheiten) => { }],
['seekforward', (Einzelheiten) => { }],
['seekto', (Einzelheiten) => { }],
];zum (const [Aktion, handler] of actionHandlers) {
try {
Navigator.mediaSession.setActionHandler(Aktion, handler);
} catch (Error) {
console.Log(`The media session action "${Aktion}" is not supported yet.`);
}
}
Das Dekonfigurieren eines Aktionshandlers für Mediensitzungen ist so einfach wie das Konfigurieren in Null.
try {
Navigator.mediaSession.setActionHandler("nächster Titel", Null);
} catch (Error) {
console.Log(`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 Veranstaltung 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.
Spielpause
das "abspielen" Aktion zeigt an, dass der Benutzer die Medienwiedergabe währenddessen fortsetzen möchte "Pause" zeigt den Wunsch an, es vorübergehend zu stoppen.
Das Symbol "Wiedergabe / Pause" wird immer in einer Medienbenachrichtigung angezeigt und zugehörige Medienereignisse werden automatisch vom Browser verarbeitet. Behandeln Sie die Medienaktionen "Wiedergabe" und "Pause" wie unten gezeigt, um das Standardverhalten zu überschreiben.
Der Browser kann beispielsweise berücksichtigen, dass eine Website beim Suchen oder Laden keine Medien wiedergibt. In diesem Fall überschreiben Sie dieses Verhalten durch Festlegen
navigator.mediaSession.playbackState zu "spielen" oder "pausiert" para asegurarse de que la Benutzeroberfläche del sitio web se mantenga sincronizada con los controles de notificación de medios.
Navigator.mediaSession.setActionHandler("abspielen", asynchron () => {
erwarten Dokument.querySelector("video").play();
Navigator.mediaSession.playbackState = "spielen";
});Navigator.mediaSession.setActionHandler("Pause", () => {
Dokument.querySelector("video").pause();
Navigator.mediaSession.playbackState = "pausiert";
});
Vorheriges Lied
das "prevustrack" Die Aktion gibt an, dass der Benutzer die aktuelle Medienwiedergabe von Anfang an starten möchte, wenn für die Medienwiedergabe der Begriff "Beginn" gilt, oder zum vorherigen Element in der Wiedergabeliste wechseln möchte, wenn für die Medienwiedergabe der Begriff "Wiedergabeliste" verwendet wird.
Navigator.mediaSession.setActionHandler("prevustrack", () => {
});Nächster Titel
das "nächster Titel" Die Aktion gibt an, dass der Benutzer die Medienwiedergabe zum nächsten Element in der Wiedergabeliste verschieben möchte, wenn bei der Medienwiedergabe eine Wiedergabeliste vorhanden ist.
Navigator.mediaSession.setActionHandler("nächster Titel", () => {
});Halt
das "Stopp" Die Aktion zeigt an, dass der Benutzer die Medienwiedergabe stoppen und gegebenenfalls den Status löschen möchte.
Navigator.mediaSession.setActionHandler("Stopp", () => {
});Suche vorwärts / rückwärts
das "Rückblick" Die Aktion zeigt an, dass der Benutzer die Medienwiedergabezeit für kurze Zeit zurückspulen möchte "suchwärts" zeigt den Wunsch an, die Medienwiedergabezeit kurz vorzuverlegen. In beiden Fällen bedeutet ein kurzer Zeitraum einige Sekunden.
das seekOffset Der im Aktionshandler angegebene Wert ist die Zeit in Sekunden, um die Medienwiedergabezeit zu überschreiten. Wenn nicht angegeben (zum Beispiel nicht definiert), dann sollten Sie eine angemessene Zeit verwenden (z. B. 10-30 Sekunden).
const Video = Dokument.querySelector('video');
const defaultSkipTime = 10; Navigator.mediaSession.setActionHandler("Rückblick", (Einzelheiten) => {
const skipTime = Einzelheiten.seekOffset || defaultSkipTime;
Video.currentTime = Math.max(Video.currentTime - skipTime, 0);
});
Navigator.mediaSession.setActionHandler("suchwärts", (Einzelheiten) => {
const skipTime = Einzelheiten.seekOffset || defaultSkipTime;
Video.currentTime = Math.min(Video.currentTime + skipTime, Video.duration);
});
Suchen Sie nach einem bestimmten Moment
das "versuchen" Aktion gibt an, dass der Benutzer die Medienwiedergabezeit auf eine bestimmte Zeit verschieben möchte.
das seekTime Der im Aktionshandler angegebene Wert gibt die Zeit in Sekunden an, auf die die Medienwiedergabezeit verschoben werden soll.
das fastSeek Der im Aktionshandler angegebene Boolesche Wert ist wahr, wenn die Aktion als Teil einer Sequenz mehrmals aufgerufen wird und dies nicht der letzte Aufruf in dieser Sequenz ist.
const Video = Dokument.querySelector('video');Navigator.mediaSession.setActionHandler("versuchen",(Einzelheiten) => {
wenn (Einzelheiten.fastSeek && "fastSeek" im Video) {
Video.fastSeek(Einzelheiten.seekTime);
Rückkehr;
}
Video.currentTime = Einzelheiten.seekTime;
});
Stellen Sie die Wiedergabeposition ein
Die genaue Anzeige der Medienwiedergabeposition in einer Benachrichtigung ist so einfach wie das Einstellen des Positionsstatus zum richtigen Zeitpunkt (siehe unten). Der Positionsstatus ist eine Kombination aus Medienwiedergabegeschwindigkeit, Dauer und aktueller Zeit.
Der Positionsstatus wird unter Android ab Chrome 81 und höher unterstützt.
const Video = Dokument.querySelector("video");Funktion updatePositionState() {
wenn ("setPositionState" im Navigator.mediaSession) {
Navigator.mediaSession.setPositionState({
duration: Video.duration,
playbackRate: Video.playbackRate,
position: Video.currentTime
});
}
}
erwarten Video.play();
updatePositionState();
Navigator.mediaSession.setActionHandler("Rückblick", Einzelheiten => {
updatePositionState();
});
Navigator.mediaSession.setActionHandler("suchwärts", Einzelheiten => {
updatePositionState();
});
Navigator.mediaSession.setActionHandler("versuchen", Einzelheiten => {
updatePositionState();
});
Video.addEventListener("ratechange", Veranstaltung => {
updatePositionState();
});
Das Zurücksetzen des Positionsstatus ist so einfach wie das Einstellen auf Null.
Navigator.mediaSession.setPositionState(Null);Proben
Schau dir einige an Beispiele für Mediensitzungen Präsentieren Blender Foundation y
Jan Morgensterns Arbeit.
Ein Screencast, der die Media Session API veranschaulicht
Meint
