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.
- Bei Computer-PWAs ist die Autoplay-Funktion mit Ton aktiviert.
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 sie. 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.
In ChromeOS weisen Android-Apps, die Audiofokus verwenden, Chrome jetzt an, die Audiowiedergabe zu pausieren und fortzusetzen, um ein nahtloses Medienerlebnis zwischen Websites in Chrome, Chrome-Apps und Android-Apps zu schaffen. Dies 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 Aktions-Handler 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-Anforderung, 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 tatsächlichen Richtlinienüberprüfungen sind jedoch auf bestimmten Plattformen möglicherweise 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
Ursprungstest für die Funktion „Auto-Bild im Bild“ 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 leider mit der Anforderung für Nutzergesten nicht möglich. Und 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>
Das funktioniert so:
- Wenn das Dokument ausgeblendet wird, wechselt das Videoelement, dessen
autopictureinpicture-Attribut zuletzt festgelegt wurde, automatisch in den Modus „Bild im Bild“, sofern dies zugelassen 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 findest du in der Spezifikation. Du kannst auch das offizielle 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 (zuvor nur auf Mobilgeräten). Mit einer neuen skipad-Media-Sitzungsaktion kann diese Option in Picture-in-Picture angeboten werden.
Um diese Funktion bereitzustellen, übergeben Sie beim Aufrufen von setActionHandler() eine Funktion mit skipad. Wenn Sie ihn ausblenden möchten, wischen Sie auf null. Wie Sie weiter unten lesen können, ist es 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.
}
Dann probiere das offizielle Beispiel zum Überspringen von Anzeigen aus und lass uns wissen, wie wir diese Funktion verbessern können.
Experimentelle Absicht | Chromestatus-Tracker | Chromium-Programmfehler
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: Sie gilt nur für Seiten im Umfang des Web-App-Manifests.