Aggiornamenti audio/video in Chrome 58

Francesco Beaufort
François Beaufort
GitHub

Personalizzazione dei controlli multimediali

Gli sviluppatori possono ora personalizzare i controlli multimediali nativi di Chrome, come i pulsanti download, schermo intero e [remoteplayback], utilizzando la nuova [API ControlsList].

Controlli multimediali nativi in Chrome 58
Figura 1. Controlli multimediali nativi in Chrome 58

Questa API consente di mostrare o nascondere i controlli dei contenuti multimediali nativi che non hanno senso o non fanno parte dell'esperienza utente prevista oppure consentono solo un insieme limitato di funzionalità.

Per il momento l'implementazione attuale è un meccanismo di lista bloccata sui controlli nativi con la possibilità di impostarli direttamente dai contenuti HTML utilizzando il nuovo attributo controlsList. Guarda il campione 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 di Chromestatus | Bug di Chromium

Riproduzione automatica per app web progressive aggiunta alla schermata Home

In precedenza, Chrome bloccava tutti i contenuti autoplay con l'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>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Intenzione di spedizione | Tracker di Chromestatus | Bug di Chromium

Metti in pausa la riproduzione automatica del video con audio disattivato quando è invisibile

Come forse già saprai, Chrome su Android consente l'avvio della riproduzione dei video di muted senza interazione da parte 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, al fine di ridurre il consumo di batteria, 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 di Chromestatus | Bug di Chromium

query supporti color-gamut

Poiché le schermate con un'ampia gamma di colori sono sempre più utilizzate, i siti possono ora accedere alla gamma approssimativa di colori supportati da Chrome e dai dispositivi di output utilizzando la query supporti color-gamut.

Se non hai ancora familiarità con le definizioni di spazio colore, profilo di colore, gamma, gamma ampia e profondità di colore, ti consiglio vivamente di leggere il post del blog WebKit Migliorare il colore sul Web. Approfondisce ulteriormente come utilizzare la query supporti color-gamut per pubblicare immagini ad ampio gamut quando l'utente utilizza display ad ampio gamut e altrimenti usa le immagini sRGB.

L'attuale implementazione in Chrome accetta le parole chiave srgb, p3 (gamma specificata da DCI P3 Color Space) e rec2020 (gamma specificata dalle parole chiave ITU-R Recommendation BT.2020 Color Space). Guarda il campione 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 di Chromestatus | Bug di Chromium