Aggiornamenti di contenuti multimediali in Chrome 73

François Beaufort

In questo articolo illustreremo le nuove funzionalità multimediali di Chrome 73, che includono:

• Ora i tasti multimediali hardware sono supportati per controllare la riproduzione di contenuti multimediali su computer.
• Gli sviluppatori web possono eseguire query per verificare se è possibile applicare determinati criteri HDCP.
• Picture in picture automatica nelle PWA desktop e "Salta annuncio" in Picture in picture stanno arrivando alle prove dell'origine.
• Alle PWA desktop viene concessa la riproduzione automatica con audio.

Supporto dei token multimediali hardware

Molte tastiere oggi dispongono di tasti per controllare le funzioni di riproduzione di contenuti multimediali di base, come brani di riproduzione/pausa, precedente e successiva. Anche le cuffie ne hanno uno. Fino ad ora, gli utenti di computer desktop non possono utilizzare questi tasti multimediali per controllare la riproduzione di audio e video in Chrome. Oggi la situazione cambia.

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

In ChromeOS, le app per Android che utilizzano la funzionalità Audio focus ora indicano a Chrome di mettere in pausa riprendi l'audio per creare un'esperienza multimediale fluida tra i siti web su Chrome App di Chrome e App per Android. Al momento questa funzionalità è supportata solo su ChromeOS dispositivo 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 su computer (precedentemente supportata solo sui dispositivi mobili), gli sviluppatori web possono gestire eventi correlati, ad esempio le modifiche al tracciamento, che vengono attivati dai tasti multimediali. La 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 valore predefinito un comportamento non ottimale, puoi comunque impostare alcuni gestori di azioni "riproduci" e "metti in pausa" per evitare che questo accada.

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 in seguito.

Consulta la nostra documentazione per gli sviluppatori esistente e prova i contenuti multimediali ufficiali Esempi di sessione.

Tracker dello stato di Chrome | Bug di Chromium

Contenuti multimediali criptati: controllo dei criteri HDCP

Grazie all'API HDCP Policy Check, ora gli sviluppatori web possono chiedere se un norme specifiche, ad esempio Requisito HDCP, può essere applicato prima della richiesta Licenze Widevine e caricamento di 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 delle norme potrebbero non saranno disponibili su alcune piattaforme. Ad esempio, promessa di controllo dei criteri HDCP verrà rifiutato con NotSupportedError su Android e Android WebView.

Consulta la precedente documentazione per gli sviluppatori e prova la documentazione ufficiale esempio per vedere 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

Per alcune pagine potrebbe essere necessario inserire e uscire automaticamente dalla modalità Picture in picture per un elemento video; ad esempio, le app web per videoconferenze potrebbero trarre vantaggio comportamento automatico Picture in picture quando l'utente passa da una modalità all'altra l'app web e altre applicazioni o schede. Purtroppo ciò non è possibile con requisito di attivazione dei gesti dell'utente. Ora arriva la funzionalità Picture in picture automatica.

Per supportare il passaggio tra schede e app, è stato aggiunto un nuovo attributo autopictureinpicture viene aggiunto all'elemento <video>.

<video autopictureinpicture></video>

Ecco come funziona:

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

È tutto. Tieni presente che la funzionalità Picture in picture automatica si applica solo a App web progressive installate dagli utenti sul desktop.

Consulta le specifiche per ulteriori dettagli e provali utilizzando la PWA ufficiale campione.

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

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

Il modello pubblicitario video consiste in genere di annunci pre-roll. Content (Contenuti) i provider spesso offrono la possibilità di saltare l'annuncio dopo pochi secondi. Purtroppo poiché la finestra Picture in picture non è interattiva, gli utenti che guardano un video Picture in picture non può farlo oggi.

L'API Media Session ora disponibile su computer (era supportata su mobile solo prima), è possibile utilizzare una nuova azione della sessione multimediale skipad per offrire questo in Picture in picture.

Per fornire questa funzionalità, passa una funzione con skipad durante la chiamata setActionHandler(). Per nasconderla, supera null. Come puoi leggere di seguito, piuttosto chiara.

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 "Salta annuncio" ufficiale esempio e facci sapere come questa funzionalità può migliorare l'IA.

Intenzione di sperimentare | 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: riproduzione automatica con per le PWA installate. Tieni presente che si applica solo alle pagine in L'ambito del file manifest dell'app web.

Bug di Chromium