Chrome 63/64'teki medya güncellemeleri

François Beaufort
François Beaufort
GitHub

Medya Özellikleri - Decoding Info API

Günümüzde web geliştiricileri belirsiz bir şekilde isTypeSupported() veya canPlayType() medyaların şifrelerinin çözülüp çözülmediğini öğrenin. Ancak asıl soru şu olmalıdır: "bu cihazda ne kadar iyi performans gösterir?"

Bu, önerilen Medya Özellikleri'nin tam olarak sağlamak istediği çözüm: Tarayıcının, cihazın kod çözme yeteneğini sorgulamak için kullanılan bir API codec'ler, profil, çözünürlük, bit hızları vb. bilgilere dayalı olarak çalışır. ve ses oynatmanın akıcı olup olmayacağı gibi bilgileri tarayıcı tarafından kaydedilen önceki oynatma istatistiklerine dayalı olarak güç verimliliği.

Decoding Info API'nin şu an için nasıl çalıştığı aşağıda kısaca açıklanmıştır. Şu bölüme göz atın: resmi örnek kullanın.

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.');
});

En iyisini bulana kadar farklı medya yapılandırmalarını deneyebilirsiniz (smooth ve powerEfficient) ve uygun medyayı oynatmak için kullanın akış şeklinde gösterilir. Bu arada, Chrome'un mevcut uygulaması önceki kaydedilen oynatma bilgilerini sağlar. Yüzde oranında ise smooth doğru olarak tanımlanır Atlanan karelerin oranı% 10'un altındayken powerEfficient, daha fazla olduğunda doğrudur şifre çözme işlemi donanımlar tarafından çözülür. Küçük kareler her zaman güç verimli olarak kabul edilir.

Aşağıdakine benzer bir snippet kullanarak uygulamanızı kullanan tarayıcılar için desteklenmemektedir.

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;
  });
}

Kaynak denemeleri için kullanılabilir

Kod Çözme özelliğini kullanan geliştiricilerden mümkün olduğunca fazla geri bildirim almak için (Medya Özellikleri'nin bir parçası) olan Info API'yi önceki özelliğini kullanıma sunduk.

Deneme sürümü Nisan 2018'de başarıyla sona erdi.

Deneme Amacı | Gönderim Amacı | ChromeDurum İzleyici | Chromium Hatası

Windows 10'da HDR video oynatma

Yüksek Dinamik Aralıklı (HDR) videolar, daha yüksek kontrasta sahiptir ve her zamankinden daha fazla netlikte etkileyici gölgeler ve çarpıcı parlak alanlar. Dahası geniş renk gamı desteği, renklerin daha canlı olacağı anlamına gelir.

Simüle edilmiş SDR ve HDR karşılaştırması (Doğru HDR'yi görmek için HDR ekran gerekir)
Simüle edilmiş SDR ve HDR karşılaştırması (Doğru HDR'yi görmek için HDR ekran gerekir)

VP9 Profile 2 olarak 10 bit oynatma artık Windows 10 Sonbahar için Chrome'da destekleniyor İçerik Üretici Güncellemesi. Chrome ayrıca, Windows 10 olduğunu doğrulayın. Teknik açıdan bakıldığında, Chrome 64 artık scRGB rengini destekliyor. medya içeriğinin HDR olarak oynatılmasına izin veren bir profili ayarlar.

YouTube'da The World in HDR in 4K (ULTRA HD) videosunu izleyebilirsiniz. ve YouTube oynatıcı kalitesi ayarına bakarak HDR oynatılıp oynatılmadığını kontrol edin.

HDR özellikli YouTube oynatıcı kalite ayarı
HDR özellikli YouTube oynatıcı kalite ayarı

Şimdilik tek ihtiyacınız olan, HDR uyumlu bir Windows 10 Sonbahar İçerik Üretici Güncellemesi grafik kartı ve ekran (ör. NVIDIA 10 serisi kart, LG HDR TV veya monitör), ve Windows ekran ayarlarında HDR modunu açın.

Web geliştiricileri, çıktının desteklediği yaklaşık renk gamını algılayabilir son renk gamı medya sorgusu içeren bir cihazdaki ekranda screen.colorDepth ile bir renk görüntülemenizi sağlar. Proje boyunca Örneğin, VP9 HDR'nin desteklenip desteklenmediğini tespit etmek için:

// 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"'))
}

Profil 2'ye sahip VP9 codec dizesiisTypeSupported() örneğinin video kodlama özelliklerinize göre güncellenmesi gerekir.

HDR renklerini CSS'de, kanvasda, resimler ve korumalı içerikler. Chrome ekibi bu konu üzerinde çalışıyor. Bizi izlemeye devam edin!

Windows ve Mac için kalıcı lisanslar

Şifrelenmiş Medya Uzantıları (EME) hizmetindeki kalıcı lisans, lisansın uygulamanın lisans yüklemesini sağlamak için cihazda kalıcı belleğe almasını sağlar. İşte bu şekilde: çevrimdışı oynatma EME'de destekleniyor.

Şimdiye kadar kalıcı sistemi destekleyen tek platformlar ChromeOS ve Android'di. lisans. Artık doğru değil. Korumalı içeriği EME üzerinden oynatırken Windows ve Mac'teki Chrome 64 sürümünde de artık çevrimdışı olmak mümkün.

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.
});

Sample Media PWA'ya göz atarak kalıcı lisansları kendiniz deneyebilirsiniz. ve şu adımları uygulayın:

  1. https://biograf-155113.appspot.com/ttt/episode-2/ adresine gidin
  2. "Çevrimdışı kullanılabilir yap"ı tıklayın ve videonun indirilmesini bekleyin.
  3. İnternet bağlantınızı kapatın.
  4. "Oyna"yı tıklayın. düğmesine basarak videonun keyfini çıkarın!

Medya önceden yükleme varsayılan olarak "meta verilere" ayarlanır

Diğer tarayıcıların eşleştirme işlemleri Chrome masaüstü artık varsayılan olarak aşağıdaki adımları uygulayarak <video> ve <audio> öğelerinin önceden "metadata" değerine yüklenmesini sağlayabilirsiniz. bant genişliği ve kaynak kullanımını azaltır. Chrome 64 sürümünden itibaren bu yeni davranış yalnızca önceden yükleme değerinin ayarlanmadığı durumlar için geçerlidir. Önceden yükleme özelliğinin ipucu, medya öğesineMediaSource kendi önceden yüklenmesini sağlar.

Başka bir deyişle, <video> önceden yükleme değeri artık "metadata" iken <video preload="auto"> önceden yükleme değeri "auto" olarak kalıyor. Resmi örneği deneyin.

Gönderim Amacı | ChromeDurum İzleyici | Chromium Hatası

Desteklenmeyen çalma hızı bir istisnaya neden oluyor

Medya öğeleri aşağıdaki durumlar sırasında, bir HTML spesifikasyonu değişikliğinin ardından playbackRate Chrome tarafından desteklenmeyen bir değere (ör. negatif bir değer) ayarlanırsa bir "NotSupportedError" DOMException, Chrome 63 sürümünde atıldı.

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

Bu arada, Chrome'un mevcut uygulaması, playbackRate negatif bir değer, 0, 0625'ten küçük veya 16'dan büyük. Deneyin resmi örneğe nasıl yapılacağını göstereceğim.

Gönderim Amacı | ChromeDurum İzleyici | Chromium Hatası

Arka plan video parçası optimizasyonları

Chrome ekibi her zaman pil ömrünü uzatmanın yeni yollarını bulmaya çalışıyor. Chrome 63 için de durum farklıydı.

Ses parçası içermiyorsa video otomatik olarak Chrome'da arka planda (ör. görünmez bir sekmede) oynatıldığında duraklatıldı (Windows, Mac, Linux ve ChromeOS). Bu, Arkadaş Bitkiler projesinin yalnızca Chrome 62'deki MSE videoları için geçerli olan benzer bir değişiklik yapıldı.

Chromium Hatası

Olağanüstü oynatma hızları için sesi kapatma özelliğini kaldır

Chrome 64'ten önce playbackRate, 0,5'in altında veya 4'ün üstündeyken ses kapalıydı Çünkü kalite önemli ölçüde düştü. Chrome, yeni bir Kaliteyi düşürme için Dalga Formu-Benzerlik-Çakışma-Ekle (WSOLA) yaklaşımı, sesinin kapatılmasına gerek yoktur. Yani sesi çok yavaş çalabilir ve artık çok hızlı.

Chromium Hatası