Aggiornamenti di contenuti multimediali in Chrome 58

François Beaufort
François Beaufort
GitHub

Personalizzazione dei controlli multimediali

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

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

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 oppure per consentire solo un insieme limitato di funzionalità.

L'implementazione attuale prevede per ora un meccanismo di blocklist sui controlli nativi con la possibilità di impostarli direttamente dai contenuti HTML utilizzando il nuovo attributo controlsList. Dai un'occhiata al 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

Intent to Ship | Chromestatus Tracker | Chromium Bug

Riproduzione automatica per le app web progressive aggiunta alla schermata Home

In precedenza, Chrome bloccava tutti i autoplay con audio su Android senza eccezioni. Questo non è più vero. D'ora in poi, i siti installati utilizzando il flusso Aggiungi alla schermata Home migliorato possono riprodurre automaticamente audio e video serviti da origini incluse nell'ambito del manifesto 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 quando /foo è nell'inquadratura.

Cosa non fare
<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 è nell'ambito.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Mettere in pausa la riproduzione automatica del video senza audio quando è invisibile

Come forse già saprai, Chrome su Android consente la riproduzione automatica dei video muted senza interazione dell'utente. Se un video è contrassegnato come muted e ha l'attributo autoplay, Chrome inizia a riprodurre il 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à sospesa quando non sono visibili sullo schermo e ripresa quando tornano in visualizzazione, seguendo il comportamento di Safari iOS.'

Intent to Ship | Chromestatus Tracker | Chromium Bug

query supporti color-gamut

Poiché gli schermi con ampia gamma di colori sono sempre più popolari, i siti ora possono accedere alla gamma approssimativa di colori supportati da Chrome e dai dispositivi di output utilizzando la media query color-gamut.

Se non hai ancora familiarità con le definizioni di spazio colore, profilo colore, gamut, wide gamut e profondità del colore, ti consiglio vivamente di leggere il post del blog Improving Color on the Web di WebKit. Descrive in dettaglio come utilizzare la query supporti color-gamut per pubblicare immagini ad ampia gamma quando l'utente utilizza display ad ampia gamma e ripristina le immagini sRGB in caso contrario.

L'attuale implementazione in Chrome accetta le parole chiave srgb, p3 (gamut specificato dallo spazio colore DCI P3) e rec2020 (gamut specificato dallo spazio colore ITU-R BT.2020). Dai un'occhiata al 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")';
}

Intent to Ship | Chromestatus Tracker | Chromium Bug