Aggiornamenti di contenuti multimediali in Chrome 73

François Beaufort
François Beaufort
GitHub

In questo articolo, parlerò delle nuove funzionalità multimediali di Chrome 73, tra cui:

Supporto di tasti multimediali hardware

Molte tastiere oggi dispongono di tasti per controllare le funzioni base di riproduzione dei contenuti multimediali, come riproduzione/pausa, traccia precedente e successiva. Anche le cuffie ne hanno uno. Finora, gli utenti di computer non potevano utilizzare questi tasti multimediali per controllare la riproduzione audio e video in Chrome. La situazione cambia oggi.

Tasti multimediali della tastiera
Tasti multimediali della tastiera

Se l'utente preme il tasto Pausa, l'elemento multimediale attivo in riproduzione in Chrome verrà messo in pausa e riceverà un evento multimediale "in pausa". Se viene premuto il tasto di riproduzione, l'elemento multimediale precedentemente messo in pausa riprenderà e riceverà un evento multimediale "riproduzione". Funziona indipendentemente dal fatto che Chrome sia in primo piano o in background.

In ChromeOS, le app per Android che utilizzano l'audio attivo ora indicano a Chrome di mettere in pausa e riprendere l'audio per creare un'esperienza multimediale fluida tra i siti web su Chrome, le app di Chrome e le app per Android. Questa funzionalità è attualmente supportata solo sui dispositivi ChromeOS con Android P.

In breve, è buona norma ascoltare sempre questi eventi multimediali e agire di conseguenza.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Ma non è tutto. Con l'API Media Session ora disponibile sui computer (prima era supportata solo sui dispositivi mobili), gli sviluppatori web possono gestire eventi relativi ai contenuti multimediali, ad esempio la modifica del canale che viene attivata dalle chiavi multimediali. Gli eventi previoustrack e nexttrack sono attualmente supportati.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

I tasti di riproduzione e pausa sono gestiti automaticamente da Chrome. Tuttavia, se il comportamento predefinito non funziona, puoi comunque impostare alcuni gestori di azioni per le parole "riproduci" e "pausa" per evitarlo.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Il supporto dei tasti multimediali hardware è disponibile su ChromeOS, macOS e Windows. Linux verrà disponibile in seguito.

Consulta la nostra documentazione per gli sviluppatori esistente e prova gli esempi ufficiali della sessione multimediale.

Tracker di stato di Chrome | Bug di Chromium

Contenuti multimediali criptati: controllo criteri HDCP

Grazie all'API HDCP Policy Check, gli sviluppatori web ora possono interrogare se è possibile applicare una norma specifica, ad esempio il requisito HDCP, prima di richiedere le licenze Widevine e caricare i contenuti multimediali.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

L'API è disponibile su tutte le piattaforme. Tuttavia, gli effettivi controlli dei criteri potrebbero non essere disponibili su alcune piattaforme. Ad esempio, la promessa di controllo dei criteri HDCP verrà rifiutata con NotSupportedError su Android e Android WebView.

Consulta la documentazione precedente per gli sviluppatori e prova l'esempio ufficiale per conoscere tutte le versioni HDCP supportate.

Intenzione di spedizione | Tracker dello stato di Chrome | Bug di Chromium

Prova dell'origine per Picture in picture automatica per le PWA installate

Alcune pagine potrebbero voler attivare e uscire automaticamente dalla funzionalità Picture in picture per un elemento video; ad esempio, le app web di videoconferenza potrebbero trarre vantaggio da un comportamento Picture in picture automatico quando l'utente passa dall'app web e viceversa ad altre applicazioni o schede. Purtroppo, questo non è possibile con il requisito di utilizzo dei gesti dell'utente. Ecco quindi la funzionalità Picture in picture automatica.

Per supportare il cambio di schede e app, viene aggiunto un nuovo attributo autopictureinpicture all'elemento <video>.

<video autopictureinpicture></video>

Ecco come funziona:

  • Quando il documento viene nascosto, l'elemento video il cui attributo autopictureinpicture è stato impostato più di recente inserisce automaticamente Picture in picture, se consentito.
  • Quando il documento diventa visibile, l'elemento video in Picture in picture lo lascia automaticamente.

e il gioco è fatto. Tieni presente che la funzionalità Picture in picture automatica si applica solo alle app web progressive che gli utenti hanno installato su computer.

Consulta le spec per maggiori dettagli e prova utilizzando l'esempio ufficiale di PWA.

Intenzione di esperimento | Tracker dello stato di Chrome | Bug di Chromium

Prova dell'origine per Salta annuncio nella finestra Picture in picture

Il modello di pubblicità video è generalmente costituito da annunci pre-roll. I fornitori di contenuti spesso offrono la possibilità di saltare l'annuncio dopo alcuni secondi. Purtroppo, poiché la finestra Picture in picture non è interattiva, gli utenti che guardano un video in Picture in picture non possono farlo oggi.

Con l'API Media Session ora disponibile su computer (prima era supportata solo sui dispositivi mobili), è possibile utilizzare una nuova azione della sessione multimediale skipad per offrire questa opzione in Picture in picture.

Pulsante Salta annuncio nella finestra Picture in picture
Pulsante "Salta annuncio" nella finestra Picture in picture

Per fornire questa funzionalità, passa una funzione con skipad durante la chiamata a setActionHandler(). Per nasconderla, supera null. Come puoi leggere qui sotto, è piuttosto semplice.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Prova l'esempio ufficiale di "Salta annuncio" e facci sapere come possiamo migliorare questa funzionalità.

Intenzione di esperimento | Tracker dello stato di Chrome | Bug di Chromium

Riproduzione automatica concessa per le PWA desktop

Ora che le app web progressive sono disponibili su tutte le piattaforme desktop, stiamo estendendo la regola che avevamo sui dispositivi mobili e sui computer: la riproduzione automatica con audio è ora consentita per le PWA installate. Tieni presente che si applica solo alle pagine nell'ambito del manifest dell'app web.

Bug di Chromium