- Entwickler können jetzt Mediensteuerelemente anpassen, z. B. die Schaltflächen für den Download, den Vollbildmodus und die Remote-Wiedergabe.
- Auf Websites, die mit dem Ablauf „Zum Startbildschirm hinzufügen“ installiert wurden, können Audio- und Videoinhalte im Bereich des Manifests automatisch wiedergegeben werden.
- Chrome auf Android-Geräten pausiert jetzt die automatische Wiedergabe eines stummgeschalteten Videos, wenn es nicht sichtbar ist.
- Entwickler können jetzt mithilfe der
color-gamut-Mediaabfrage auf den ungefähren Farbbereich zugreifen, der von Chrome und von Ausgabegeräten unterstützt wird. - Wenn Sie Medienquellenerweiterungen verwenden, ist es jetzt möglich, zwischen verschlüsselten und unverschlüsselten Streams zu wechseln.
Anpassung der Mediensteuerung
Entwickler können jetzt mit der neuen [ControlsList API] die nativen Mediensteuerelemente von Chrome anpassen, z. B. die Schaltflächen für Downloads, Vollbild und [remoteplayback].
Mit dieser API können Sie Steuerelemente für native Medien ein- oder ausblenden, die nicht sinnvoll sind, nicht zum erwarteten Nutzererlebnis gehören oder nur eine begrenzte Anzahl von Funktionen zulassen.
Die aktuelle Implementierung ist ein Sperrlistenmechanismus für native Steuerelemente, mit dem sie mithilfe des neuen Attributs controlsList direkt aus HTML-Inhalten festgelegt werden können. Hier finden Sie das offizielle Beispiel.
Verwendung in HTML:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
Verwendung in JavaScript:
var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"
video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true
Absendeabsicht | Chromestatus-Tracker | Chromium-Programmfehler
Autoplay für progressive Web-Apps zum Startbildschirm hinzugefügt
Bisher hat Chrome unter Android alle autoplay mit Ton ohne Ausnahme blockiert. Das ist nicht mehr der Fall. Ab sofort dürfen auf Websites, die mit dem verbesserten Ablauf „Zum Startbildschirm hinzufügen“ installiert werden, Audio- und Videoinhalte, die aus Quellen stammen, die im Umfang des Web App-Manifests bereitgestellt werden, ohne Einschränkungen automatisch wiedergegeben werden.
{
"name": "My Web App",
"description": "An awesome app",
"scope": "/foo",
...
}
<html>
<link rel="canonical" href="https://example.com/foo">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
Absendeabsicht | Chromestatus-Tracker | Chromium-Programmfehler
Automatische Wiedergabe stummgeschalteter Videos bei Unsichtbar pausieren
Wie du vielleicht schon weißt, ermöglicht Chrome unter Android die Wiedergabe von muted-Videos ohne Nutzerinteraktion. Wenn ein Video als muted markiert ist und das Attribut autoplay hat, startet Chrome die Wiedergabe des Videos, sobald es für den Nutzer sichtbar wird.
Um Stromverbrauch zu reduzieren, wird ab Chrome 58 die Wiedergabe von Videos mit dem Attribut autoplay pausiert, wenn sie sich nicht im Bildschirm befinden, und gemäß dem Verhalten von Safari iOS fortgesetzt, wenn sie wieder angezeigt wird.
Absendeabsicht | Chromestatus-Tracker | Chromium-Programmfehler
Farbgamut-Medienabfrage
Da Bildschirme mit breiter Farbskala immer beliebter werden, können Websites nun über die Medienabfrage color-gamut auf den ungefähren Farbbereich zugreifen, der von Chrome unterstützt wird, und von Ausgabegeräten.
Wenn Sie mit den Definitionen von Farbraum, Farbprofil, Umfang, Umfang und Farbtiefe noch nicht vertraut sind, sollten Sie unbedingt den WebKit-Blogpost Farbe im Web verbessern lesen. Es wird ausführlich erläutert, wie Sie die color-gamut-Medienabfrage verwenden können, um Bilder mit großem Umfang bereitzustellen, wenn der Nutzer Breitbanddarstellungen verwendet, oder wie Sie auf sRGB-Bilder zurückgreifen können.
Die aktuelle Implementierung in Chrome akzeptiert die Schlüsselwörter srgb, p3 (von DCI P3-Farbraum festgelegter Farbraum) und rec2020 (Gamut wie in der ITU-R-Empfehlung BT.2020 Farbraum angegeben). Hier finden Sie das offizielle Beispiel.
Verwendung in HTML:
<picture>
<source media="(color-gamut: p3)" srcset="photo-p3.jpg">
<source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
<img src="photo-srgb.jpg">
</picture>
Verwendung in CSS:
main {
background-image: url("photo-srgb.jpg");
}
@media (color-gamut: p3) {
main {
background-image: url("photo-p3.jpg");
}
}
@media (color-gamut: rec2020) {
main {
background-image: url("photo-rec2020.jpg");
}
}
Verwendung in JavaScript:
// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}
if (window.matchMedia("(color-gamut: p3)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}
if (window.matchMedia("(color-gamut: rec2020)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}
Absendeabsicht | Chromestatus-Tracker | Chromium-Programmfehler