- Entwickler können jetzt die Mediensteuerung anpassen, z. B. die Schaltflächen für den Download, den Vollbildmodus und die Remote-Wiedergabe.
- Websites, die über den Vorgang „Zum Startbildschirm hinzufügen“ installiert wurden, können Audio und Video im Bereich des Manifests automatisch abspielen.
- Chrome auf Android-Geräten pausiert jetzt die automatische Wiedergabe eines stummgeschalteten Videos, wenn es unsichtbar ist.
- Entwickler können jetzt mithilfe der
color-gamut-Medienabfrage auf den ungefähren Farbbereich zugreifen, der von Chrome und den Ausgabegeräten unterstützt wird. - Wenn Sie Medienquellenerweiterungen verwenden, ist es jetzt möglich, zwischen verschlüsselten und leeren Streams zu wechseln.
Anpassung der Mediensteuerelemente
Entwickler können jetzt die nativen Mediensteuerelemente von Chrome anpassen, z. B. die Schaltflächen zum Herunterladen, für den Vollbildmodus und für remoteplayback, mit der neuen ControlsList API.
Mit dieser API können Sie Steuerelemente für native Medien ein- oder ausblenden, die nicht sinnvoll sind oder nicht zum erwarteten Nutzererlebnis gehören oder nur eine begrenzte Anzahl von Funktionen zulassen.
Die aktuelle Implementierung ist ein Sperrlistenmechanismus für native Steuerelemente, der sie mit dem neuen Attribut controlsList direkt aus HTML-Inhalten festlegen kann. Dann sieh dir das offizielle Beispiel an.
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
Intent to Ship | Chromestatus-Tracker | Chromium-Fehler
Autoplay für progressive Web-Apps zum Startbildschirm hinzugefügt
Bisher hat Chrome unter Android alle autoplay mit Ton ausnahmslos blockiert. Dies ist nicht mehr der Fall. Ab sofort dürfen auf Websites, die mit dem verbesserten Vorgang „Zum Startbildschirm hinzufügen“ installiert wurden, Audio- und Videoinhalte aus Quellen automatisch wiedergegeben werden, die im Umfang des Web App-Manifests ohne Einschränkungen enthalten sind.
{
"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>
Audio wird automatisch wiedergegeben, da /foo enthalten ist.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
Audio kann nicht automatisch wiedergegeben werden, da /bar NICHT Teil des Zuständigkeitsbereichs ist.
Intent to Ship | Chromestatus-Tracker | Chromium-Fehler
Automatische Wiedergabe des stummgeschalteten Videos pausieren, wenn es nicht sichtbar ist
Wie du vielleicht schon weißt, können muted-Videos in Chrome unter Android ohne Nutzerinteraktion abgespielt werden. Wenn ein Video als muted markiert und das Attribut autoplay hat, startet Chrome die Wiedergabe des Videos, sobald es für den Nutzer sichtbar wird.
Um den Stromverbrauch zu reduzieren, wird ab Chrome 58 die Wiedergabe von Videos mit dem Attribut autoplay pausiert, wenn der Bildschirm ausgeschaltet ist, und gemäß dem Verhalten von Safari für iOS fortgesetzt, wenn sie wieder sichtbar ist.
Intent to Ship | Chromestatus-Tracker | Chromium-Fehler
Farbgamut-Medienabfrage
Da Bildschirme mit breiter Farbskala immer beliebter werden, können Websites jetzt über die Medienabfrage color-gamut auf den ungefähren Farbbereich zugreifen, der von Chrome unterstützt wird, und Ausgabegeräten.
Wenn Sie mit den Definitionen von Farbraum, Farbprofil, Farbraum, Breitgamut und Farbtiefe noch nicht vertraut sind, sollten Sie unbedingt den WebKit-Blogpost Improving Color on the Web lesen. Es wird detailliert beschrieben, wie die color-gamut-Medienabfrage verwendet werden kann, um Bilder mit großem Umfang bereitzustellen, wenn der Nutzer Breitgamut-Displays verwendet und andernfalls auf sRGB-Bilder zurückgreift.
Die aktuelle Implementierung in Chrome akzeptiert die Suchbegriffe srgb, p3 (Gamut wird durch den DCI P3-Farbraum angegeben) und rec2020 (Gamut, der in der ITU-R-Empfehlung BT.2020-Farbraum angegeben ist). Dann sieh dir das offizielle Beispiel an.
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")';
}