- Ora gli sviluppatori possono personalizzare i controlli multimediali, ad esempio i pulsanti di download, a schermo intero e di riproduzione da remoto.
- I siti installati utilizzando il flusso "Aggiungi alla schermata Home" possono riprodurre automaticamente audio e video nell'ambito del manifest.
- Ora Chrome su Android mette in pausa la riproduzione automatica di un video con l'audio disattivato quando non è visibile.
- Ora gli sviluppatori possono accedere all'intervallo approssimativo di colori supportati da Chrome e dai dispositivi di output utilizzando la
color-gamutquery multimediale. - Quando utilizzi le Estensioni di origine media, ora è possibile passare dagli stream criptati a quelli non criptati e viceversa.
Personalizzazione dei controlli multimediali
Ora gli sviluppatori possono personalizzare i controlli multimediali nativi di Chrome, come i pulsanti di download, a schermo intero e di remoteplayback, utilizzando la nuova API ControlsList.
Questa API offre un modo per mostrare o nascondere i controlli multimediali nativi che non hanno senso o non fanno parte dell'esperienza utente prevista o che consentono solo un insieme limitato di funzionalità.
L'implementazione attuale è un meccanismo di lista bloccata per i controlli nativi con la possibilità di impostarli direttamente dai contenuti HTML utilizzando il nuovo attributo controlsList. Dai un'occhiata all'esempio 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
La Riproduzione automatica per le app web progressive è stata aggiunta alla schermata Home
In precedenza, Chrome bloccava tutti i contenuti autoplay con audio su Android senza alcuna eccezione. Questo non è più vero. D'ora in poi, i siti installati utilizzando il flusso
migliorato Aggiungi alla schermata Home possono riprodurre automaticamente l'audio e il video
pubblicati da origini incluse nell'ambito del file 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é /foo rientra nell'ambito.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
La riproduzione automatica dell'audio non riesce perché /bar NON rientra nell'ambito.
Intent to Ship | Chromestatus Tracker | Bug di Chromium
Mettere in pausa la riproduzione automatica dei video con audio disattivato quando non sono visibili
Come forse già saprai, Chrome su Android consente di avviare la riproduzione dei video muted senza alcuna interazione da parte dell'utente. Se un video è contrassegnato come muted e ha l'attributo
autoplay, Chrome avvia 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 non è attiva la schermata e ripresa quando
viene visualizzata di nuovo, in base al comportamento di Safari su iOS.
Intent to Ship | Chromestatus Tracker | Bug di Chromium
query multimediale color-gamut
Poiché le schermate con una gamma di colori più ampia sono sempre più diffuse, ora i siti possono accedere alla gamma approssimativa di colori supportata da Chrome e dai dispositivi di output utilizzando la query mediacolor-gamut.
Se non hai ancora dimestichezza con le definizioni di spazio colore, profilo colore, gamma, gamma ampia e profondità del colore, ti consiglio vivamente di leggere il post del blog WebKit Migliorare il colore sul web. Spiega molti dettagli su come utilizzare la query multimediale color-gamut per pubblicare immagini ad ampia gamma di dati quando l'utente utilizza display ad ampia gamma e altrimenti utilizza immagini sRGB.
L'attuale implementazione in Chrome accetta le parole chiave srgb, p3 (gamma specificata
dall'ITU-R Recommendation BT.2020 Color Space) e rec2020 (gamma specificata dall'ITU-R Recommendation BT.2020 Color Space). Dai un'occhiata all'esempio 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")';
}