In diesem Artikel werden die neuen Medienfunktionen von Chrome 73 beschrieben. Dazu gehören:
- Hardware-Medientasten werden jetzt zur Steuerung der Medienwiedergabe auf dem Computer unterstützt.
- Webentwickler können abfragen, ob eine bestimmte HDCP-Richtlinie durchgesetzt werden kann.
- Der automatische Bild-im-Bild-Modus in Desktop-PWAs und die Option Anzeige überspringen im Bild-im-Bild-Modus werden in der Ursprungsumgebung getestet.
- Desktop-PWAs ist die automatische Wiedergabe mit Ton erlaubt.
Unterstützung von Hardware-Medientasten
Viele Tastaturen haben heutzutage Tasten zur Steuerung grundlegender Medienwiedergabefunktionen wie Wiedergabe/Pause, vorheriger und nächster Titel. Auch Headsets haben diese Funktion. Bisher konnten Desktopnutzer diese Medientasten nicht verwenden, um die Audio- und Videowiedergabe in Chrome zu steuern. Das ändert sich heute!
Wenn der Nutzer die Pausetaste drückt, wird das aktive Medienelement, das in Chrome wiedergegeben wird, pausiert und es wird ein Medienereignis vom Typ „pausiert“ gesendet. Wenn die Wiedergabetaste gedrückt wird, wird die Wiedergabe des zuvor pausierten Medienelements fortgesetzt und es wird ein Medienereignis vom Typ „Wiedergabe“ gesendet. Das funktioniert unabhängig davon, ob Chrome im Vordergrund oder im Hintergrund geöffnet ist.
Unter ChromeOS können Android-Apps, die den Audiofokus verwenden, Chrome jetzt anweisen, Audio zu pausieren und fortzusetzen, um eine nahtlose Medienwiedergabe zwischen Websites in Chrome, Chrome-Apps und Android-Apps zu ermöglichen. Diese Funktion wird derzeit nur auf ChromeOS-Geräten mit Android P unterstützt.
Kurz gesagt: Es empfiehlt sich, diese Medienereignisse immer im Blick zu behalten und entsprechend zu reagieren.
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.
});
Halt – das war noch nicht alles! Die Media Session API ist jetzt auch auf dem Computer verfügbar (zuvor nur auf Mobilgeräten). Webentwickler können damit Medienereignisse wie das Ändern von Titeln verarbeiten, die durch Medientasten ausgelöst werden. Derzeit werden die Ereignisse previoustrack und nexttrack unterstützt.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
Wiedergabe- und Pausetasten werden automatisch von Chrome verarbeitet. Wenn das Standardverhalten jedoch nicht funktioniert, können Sie einige Aktionshandler für „Wiedergabe“ und „Pause“ festlegen, um dies zu verhindern.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
Die Unterstützung von Hardware-Medientasten ist unter ChromeOS, macOS und Windows verfügbar. Linux wird später unterstützt.
Weitere Informationen findest du in unserer Entwicklerdokumentation und in den offiziellen Beispielen für Media Sessions.
Chromestatus-Tracker | Chromium-Fehler
Verschlüsselte Medien: HDCP-Richtlinienprüfung
Dank der HDCP Policy Check API können Webentwickler jetzt prüfen, ob eine bestimmte Richtlinie, z.B. die HDCP, vor dem Anfordern von Widevine-Lizenzen und dem Laden von Medien erzwungen werden kann.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
Die API ist auf allen Plattformen verfügbar. Die Richtlinienprüfungen sind jedoch möglicherweise auf bestimmten Plattformen nicht verfügbar. Beispielsweise wird das HDCP-Richtlinienüberprüfungsversprechen unter Android und Android WebView mit NotSupportedError abgelehnt.
In unserer vorherigen Entwicklerdokumentation und im offiziellen Beispiel findest du alle unterstützten HDCP-Versionen.
Intent to Ship | Chromestatus-Tracker | Chromium-Fehler
Origin-Test für den automatischen Bild-im-Bild-Modus für installierte PWAs
Auf einigen Seiten kann der Bild-im-Bild-Modus für ein Videoelement automatisch aktiviert und deaktiviert werden. Web-Videokonferenz-Apps würden beispielsweise von einem automatischen Bild-im-Bild-Verhalten profitieren, wenn Nutzer zwischen der Web-App und anderen Anwendungen oder Tabs wechseln. Dies ist aufgrund der Anforderungen an Nutzergesten leider nicht möglich. Hier kommt der automatische Bild-im-Bild-Modus!
Um diesen Tab- und App-Wechsel zu unterstützen, wird dem <video>-Element ein neues autopictureinpicture-Attribut hinzugefügt.
<video autopictureinpicture></video>
So funktionierts:
- Wenn das Dokument ausgeblendet wird, wird das Videoelement, dessen
autopictureinpicture-Attribut zuletzt festgelegt wurde, automatisch in den Bild-im-Bild-Modus versetzt, sofern dies zulässig ist. - Wenn das Dokument sichtbar wird, wird das Videoelement im Bild-im-Bild-Modus automatisch geschlossen.
Webseite. Die Funktion „Automatisches Bild-im-Bild“ gilt nur für progressive Web-Apps, die Nutzer auf dem Computer installiert haben.
Weitere Informationen finden Sie in der Spezifikation. Sie können die Funktion auch mit dem offiziellen PWA-Beispiel ausprobieren.
Intent to Experiment | Chromestatus-Tracker | Chromium-Fehler
Ursprungstest für das Überspringen von Anzeigen im Bild-im-Bild-Fenster
Das Videoanzeigenmodell besteht in der Regel aus Pre-Roll-Anzeigen. Contentanbieter bieten oft die Möglichkeit, die Anzeige nach wenigen Sekunden zu überspringen. Da das Bild-im-Bild-Fenster nicht interaktiv ist, ist das derzeit nicht möglich.
Die Media Session API ist jetzt auch auf dem Computer verfügbar (bisher nur auf Mobilgeräten). Mit einer neuen skipad-Media-Sitzungsaktion kann diese Option in Picture-in-Picture angeboten werden.
Wenn Sie diese Funktion nutzen möchten, übergeben Sie beim Aufruf von setActionHandler() eine Funktion mit skipad. Wenn Sie ihn ausblenden möchten, wischen Sie auf null. Wie Sie unten sehen, ist das ziemlich einfach.
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.
}
Teste das offizielle Beispiel für die Funktion „Anzeige überspringen“ und teile uns mit, wie wir diese Funktion verbessern können.
Intent to Experiment | Chromestatus-Tracker | Chromium-Fehler
Automatische Wiedergabe für Desktop-PWAs erlaubt
Da progressive Web-Apps jetzt auf allen Desktop-Plattformen verfügbar sind, erweitern wir die Regel, die bisher nur für Mobilgeräte galt, auf Computer: Automatische Wiedergabe mit Ton ist jetzt für installierte PWAs zulässig. Hinweis: Die Einstellung gilt nur für Seiten im Umfang des Web-App-Manifests.