- Ora gli sviluppatori possono personalizzare i controlli multimediali come i pulsanti per il download, la riproduzione a schermo intero e la riproduzione remota.
- I siti installati utilizzando il flusso "Aggiungi alla schermata Home" possono riprodurre automaticamente audio e video nell'ambito del file manifest.
- Chrome su Android ora mette in pausa la riproduzione automatica di un video con audio disattivato quando è invisibile.
- Ora gli sviluppatori possono accedere alla gamma approssimativa di colori supportati da Chrome e
ai dispositivi di output utilizzando
color-gamut
Media Query. - Quando utilizzi le estensioni di origine multimediale, ora è possibile passare tra gli stream criptati e quelli in chiaro.
Personalizzazione dei controlli multimediali
Ora gli sviluppatori possono personalizzare i controlli multimediali nativi di Chrome, come i pulsanti di download, schermo intero e riproduzione da remoto, utilizzando la nuova API ControlsList.
Questa API consente di mostrare o nascondere i controlli multimediali nativi che non hanno senso o non fanno parte dell'esperienza utente prevista oppure consentono solo un insieme limitato di funzionalità.
L'implementazione attuale per il momento è un meccanismo di lista bloccata sui controlli nativi
con la possibilità di impostarli direttamente dai contenuti HTML utilizzando il nuovo
attributo controlsList
. Guarda l'anteprima ufficiale.
Utilizzo in HTML:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
Utilizzo 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
Intenzione di spedizione | Tracker dello stato di Chrome | Bug di Chromium
Riproduzione automatica per le app web progressive aggiunta alla schermata Home
In precedenza, Chrome bloccava tutti i contenuti autoplay
con audio su Android senza eccezioni. Questo non è più vero. D'ora in poi, i siti installati utilizzando il flusso
migliorato Aggiungi alla schermata Home possono riprodurre automaticamente audio e video
pubblicati dalle origini incluse nell'ambito del manifest dell'app web, senza
limitazioni.
{
"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>
L'audio verrà riprodotto automaticamente perché l'ambito rientra nell'ambito di /foo
.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
L'audio non viene riprodotto automaticamente perché /bar
NON rientra nell'ambito.
Intenzione di spedizione | Tracker dello stato di Chrome | Bug di Chromium
Metti in pausa la riproduzione automatica del video con audio disattivato quando il video è invisibile
Come forse già saprai, Chrome su Android consente di avviare la riproduzione dei video di muted
senza l'interazione dell'utente. Se un video è contrassegnato come muted
e ha l'attributo autoplay
, Chrome inizia la riproduzione del video quando diventa visibile all'utente.
A partire da Chrome 58, per ridurre il consumo energetico, la riproduzione dei video con l'attributo autoplay
verrà messa in pausa quando è fuori schermo e ripresa quando è di nuovo visibile, seguendo il comportamento di Safari su iOS."
Intenzione di spedizione | Tracker dello stato di Chrome | Bug di Chromium
query supporti color-gamut
Poiché gli schermi con un'ampia gamma di colori sono sempre più utilizzati, i siti ora possono accedere alla
gamma approssimativa di colori supportati da Chrome e dai dispositivi di output utilizzando la
query multimediale color-gamut
.
Se non hai ancora familiarità con le definizioni di spazio dei colori, profilo dei colori, gamma, ampia gamma e profondità di colore, ti consigliamo vivamente di leggere il post del blog del WebKit Migliorare il colore sul web. Approfondisce ulteriormente come
utilizzare la query multimediale color-gamut
per pubblicare immagini ad ampio raggio quando l'utente
utilizza display ad ampia gamma, altrimenti utilizza immagini sRGB.
L'attuale implementazione in Chrome accetta le parole chiave srgb
, p3
(gamma specificata
dallo spazio colore DCI P3) e rec2020
(gamma specificata dalle parole chiave ITU-R
Recommendation BT.2020 Spazio colore). Guarda l'anteprima ufficiale.
Utilizzo 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>
Utilizzo 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");
}
}
Utilizzo 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")';
}
Intenzione di spedizione | Tracker dello stato di Chrome | Bug di Chromium