Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiornamenti di contenuti multimediali in Chrome 63/64

François Beaufort

Ora gli sviluppatori web possono prevedere se la riproduzione sarà fluida ed efficiente dal punto di vista energetico.
Chrome ora supporta la riproduzione di video HDR su Windows 10.
Riproduzione offline con licenze permanenti sono ora supportati su Windows e Mac.
Il valore di precaricamento predefinito per <video> e Il valore di <audio> elementi è ora "metadata".
Ora viene generato un errore quando i contenuti multimediali La velocità di riproduzione non è supportata.
Ora Chrome mette in pausa tutti i contenuti multimediali che contengono solo video in background.
L'audio non è più disattivato per con una velocità di riproduzione estrema.

Media Capabilities - API Decoding Info

Oggi gli sviluppatori web si affidano vagamente a isTypeSupported() o canPlayType() sapere se alcuni contenuti multimediali possono essere decodificati o meno. La vera domanda però dovrebbe essere: "che rendimento avrebbe su questo dispositivo?"

Questa è esattamente una delle cose che le Funzionalità multimediali proposte vogliono risolvere: un'API per interrogare il browser sulle capacità di decodifica del dispositivo in base a informazioni quali codec, profilo, risoluzione, velocità in bit ecc. potrebbero compromettere alcune informazioni, ad esempio se la riproduzione deve essere fluida il consumo energetico in base alle precedenti statistiche di riproduzione registrate dal browser.

In breve, ecco come funziona attualmente l'API Decoding Info. Consulta le campione ufficiale.

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

Puoi provare diverse configurazioni multimediali fino a trovare quella migliore (smooth e powerEfficient) e usalo per riprodurre i contenuti multimediali appropriati flusso di dati. A proposito, l'attuale implementazione di Chrome si basa sulla configurazione le informazioni di riproduzione registrate. Definisce smooth come true quando la percentuale di frame interrotti è inferiore al 10%, mentre powerEfficient è true quando più oltre il 50% dei frame viene decodificato dall'hardware. I fotogrammi piccoli sono sempre considerata efficiente dal punto di vista energetico.

Nota: il risultato restituito da navigator.mediaCapabilities.decodingInfo verrà sempre segnalata come fluida ed efficiente dal punto di vista energetico se la configurazione dei contenuti multimediali è supportate e le statistiche di riproduzione non sono ancora state registrate dal browser.

Ti consiglio di utilizzare uno snippet simile a quello riportato di seguito per rilevare la disponibilità e fai riferimento alla tua attuale implementazione per i browser non supportano questa API.

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

Attenzione:lo snippet precedente deve utilizzare canPlayType() anziché isTypeSupported() se il tipo di configurazione multimediale è "file".

Disponibile per le prove dell'origine

Per ottenere il maggior numero possibile di feedback dagli sviluppatori che utilizzano la funzionalità l'API Info (parte di Media Capabilities) nel campo, già presente in precedenza di Chrome 64 come prova dell'origine.

Il periodo di prova è terminato ad aprile 2018.

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

Riproduzione di video HDR su Windows 10

I video HDR (High Dynamic Range) hanno un contrasto più elevato, rivelando contenuti precisi, ombre dettagliate e alte luci straordinarie con una nitidezza mai vista prima. Inoltre il supporto di un'ampia gamma di colori rende i colori più vivaci.

. Confronto tra SDR simulato e HDR (per vedere l'HDR reale è necessario un display HDR)

Come VP9 Profile 2, la riproduzione a 10 bit è ora supportata in Chrome per Windows 10 Fall Creator Update, Chrome supporta anche la riproduzione di video HDR quando Windows 10 sia in modalità HDR. Una nota tecnica, Chrome 64 ora supporta il colore scRGB. che a sua volta consente la riproduzione dei contenuti multimediali in HDR.

Puoi provare guardando Il mondo in HDR in 4K (ULTRA HD) su YouTube e controlla che riproduca l'HDR controllando l'impostazione della qualità del player di YouTube.

. Impostazione della qualità del player di YouTube con HDR

Tutto ciò che ti serve per ora è Windows 10 Fall Creator Update, un programma compatibile con HDR scheda grafica e display (ad es. scheda NVIDIA serie 10, TV o monitor LG HDR), e attivare la modalità HDR nelle impostazioni di visualizzazione di Windows.

Gli sviluppatori web possono rilevare la gamma di colori approssimativa supportata dall'output. dispositivo con la recente query multimediale con gamma di colori e il numero di bit utilizzati per mostra un colore sullo schermo con screen.colorDepth. Ecco un modo di utilizzare quelli per rilevare se VP9 HDR è supportato, ad esempio:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

La stringa del codec VP9 con Profilo 2 passata a isTypeSupported() nel campo esempio precedente deve essere aggiornato in base alle tue proprietà di codifica video.

Tieni presente che non è ancora possibile definire i colori HDR in CSS, canvas, immagini e contenuti protetti. Il team di Chrome ci sta lavorando. Continua a seguirci.

Licenze permanenti per Windows e Mac

Una licenza permanente in Encrypted Media Extensions (EME) indica che può permanente sul dispositivo in modo che le applicazioni possano caricare la licenza memoria senza inviare un'altra richiesta di licenza al server. Ecco come la riproduzione offline è supportata in EME.

Finora, ChromeOS e Android erano le uniche piattaforme a supportare licenze. Non è più vero. Riproduzione di contenuti protetti tramite EME durante il dispositivo è offline ora è possibile anche in Chrome 64 su Windows e Mac.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

Puoi provare personalmente le licenze permanenti consultando la PWA Sample Media seguendo questi passaggi:

Vai a https://biograf-155113.appspot.com/ttt/episode-2/.
Fai clic su "Rendi disponibile offline" e attendi che il video venga scaricato.
Disattiva la connessione a internet.
Fai clic sul pulsante "Riproduci" e goditi il video!

Il precaricamento dei contenuti multimediali viene impostato in modo predefinito su "metadata"

Altri browser corrispondenti implementazioni, Chrome Desktop ora imposta l'impostazione predefinita precarica il valore degli elementi <video> e <audio> in "metadata" al fine di e ridurre la larghezza di banda e l'utilizzo delle risorse. A partire da Chrome 64, questo nuovo comportamento viene applicato solo nei casi in cui non è impostato un valore di precaricamento. Tieni presente che l'attributo di precaricamento Il hint viene ignorato quando un MediaSource viene associato all'elemento multimediale come gestisce il proprio precaricamento.

In altre parole, il valore di precaricamento <video> ora è "metadata", mentre il valore di precaricamento <video preload="auto"> rimane "auto". Prova l'anteprima ufficiale.

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

La frequenza di riproduzione non supportata genera un'eccezione

A seguito di una modifica di specifica HTML, quando gli elementi multimediali playbackRate sia impostato su un valore non supportato da Chrome (ad es. un valore negativo), un "NotSupportedError" DOMException viene inserito in Chrome 63.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

A proposito, l'attuale implementazione di Chrome solleva questa eccezione quando playbackRate è negativo, è inferiore a 0, 0625 o maggiore di 16. Prova al campione ufficiale per vedere come funziona.

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

Ottimizzazioni delle tracce video in background

Il team di Chrome è sempre alla ricerca di nuovi modi per migliorare la durata della batteria e Chrome 63 non ha fatto eccezione.

Se il video non contiene tracce audio, viene automaticamente vengono messi in pausa durante la riproduzione in background (ad es. in una scheda non visibile) in Chrome computer desktop (Windows, Mac, Linux e ChromeOS). Questo è il follow-up di un una modifica simile applicabile solo ai video MSE in Chrome 62.

Bug di Chromium

Rimuovi la disattivazione dell'audio per frequenze di riproduzione estreme

Prima di Chrome 64, l'audio veniva disattivato quando il valore di playbackRate era inferiore a 0,5 o superiore a 4 perché la qualità peggiorava in modo significativo. Poiché Chrome è passato a l'approccio WSOLA (forma d'onda-simile-sovrapposizione-aggiunta) per deterioramento della qualità, audio non deve più essere disattivato. Significa che puoi riprodurre l'audio super lento e superveloce adesso.

Bug di Chromium