In questo articolo, parlerò delle nuove funzionalità multimediali di Chrome 73, tra cui:
- Ora i tasti multimediali hardware sono supportati per controllare la riproduzione dei contenuti multimediali sul computer.
- Gli sviluppatori web possono interrogare la possibilità di applicare un determinato criterio HDCP.
- Le funzionalità Picture in picture automatica nelle PWA desktop e "Salta annuncio" in Picture in picture saranno disponibili nelle prove dell'origine.
- Alle PWA desktop viene concessa la riproduzione automatica con audio.
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.
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.
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.