Aggiornamenti di contenuti multimediali in Chrome 58

François Beaufort
François Beaufort

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.

Controlli multimediali nativi in Chrome 58
Controlli multimediali nativi in Chrome 58

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",
  ...
}
Cosa fare
<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.

Cosa non fare
<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