Chrome 63/64'teki medya güncellemeleri

François Beaufort
François Beaufort
GitHub

Medya Özellikleri - Kod Çözme Bilgi API'sı

Günümüzde web geliştiricileri, bazı medyaların kodunun çözülüp çözülemeyeceği hakkında kesin bilgi vermek için isTypeSupported() veya canPlayType() hizmetini kullanıyor. Ancak asıl soru şu olmalıdır: "Bu cihazda ne kadar iyi performans gösterir?"

Bu, önerilen Medya Özellikleri'nin çözmek istediği şeylerden tam olarak biri: codec'ler, profil, çözünürlük, bit hızları vb. gibi bilgilere dayanarak tarayıcıyı cihazın kod çözme özellikleri hakkında sorgulayacak bir API. Tarayıcı tarafından kaydedilen önceki oynatma istatistiklerine dayanarak oynatmanın düzgün ve verimli olup olmadığı gibi bilgileri açığa çıkarır.

Özetle, Kod Çözme Bilgi API'sinin şimdilik nasıl çalıştığını burada görebilirsiniz. Resmi örneği inceleyin.

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 (smooth ve powerEfficient) bulana kadar farklı medya yapılandırmalarını deneyebilir ve uygun medya akışını oynatmak için bunu kullanabilirsiniz. Bu arada, Chrome'un mevcut uygulaması, önceden kaydedilmiş oynatma bilgilerine dayanır. smooth, atlanan karelerin yüzdesi% 10'dan az olduğunda doğru olarak tanımlanırken karelerin% 50'sinden fazlasının kodu donanım tarafından çözüldüğünde powerEfficient doğru olarak tanımlanır. Küçük kareler her zaman güç tasarruflu olarak değerlendirilir.

Kullanılabilirliği algılamak ve bu API'yi desteklemeyen tarayıcılardaki mevcut uygulamanıza dönmek için aşağıdakine benzer bir snippet kullanmanızı öneririz.

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 denemelerinde kullanılabilir

Sahada Decoding Info API'sini (Medya Özellikleri'nin bir parçası) kullanan geliştiricilerden mümkün olduğunca fazla geri bildirim almak için bu özelliği daha önce Chrome 64'e kaynak denemesi olarak eklemiştik.

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

Deneme Amacı | Gönderme Amacı | Chromestatus İzleyici | Chromium Hatası

Windows 10'da HDR video oynatma

Yüksek Dinamik Aralık (HDR) videolar daha yüksek kontrasta sahiptir. Bu sayede hassas, ayrıntılı gölgeler ve çarpıcı parlak alanlar her zamankinden daha net bir şekilde ortaya çıkar. Üstelik geniş renk gamı desteği, renklerin daha canlı olmasını sağlar.

SDR ve HDR karşılaştırması simülasyonu (Gerçek HDR için bir HDR ekran gerekir)
SDR ve HDR simülasyonunun karşılaştırılması (gerçek HDR'yi görmek için HDR ekran gerekir)

VP9 Profile 2 10 bit oynatma özelliği artık Windows 10 Sonbahar İçerik Üreticisi için Chrome'da desteklenmektedir. Buna ek olarak Chrome, Windows 10 HDR modundayken HDR video oynatmayı da destekler. Teknik bir noktaya değinmek gerekirse, Chrome 64 artık scRGB renk profilini destekliyor. Bu sayede medyalar HDR olarak oynatılıyor.

YouTube'da The World in HDR in 4K (ULTRA HD) videosunu izleyebilir ve YouTube oynatıcısının kalite ayarına bakarak HDR olarak görüntülenip oynatılmadığını kontrol edebilirsiniz.

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

Şimdilik ihtiyacınız olan tek şey, HDR uyumlu bir grafik kartı ve ekran (ör. NVIDIA 10 serisi kart, LG HDR TV veya monitör) olan Windows 10 Fall Creator Update ve Windows ekran ayarlarından HDR modunu açmaktır.

Web geliştiricileri, son renk gamı medya sorgusu ile çıkış cihazı tarafından desteklenen yaklaşık renk gamını ve screen.colorDepth ile ekranda bir rengi görüntülemek için kullanılan bit sayısını algılayabilir. Örneğin, VP9 HDR'nin desteklenip desteklenmediğini tespit etmek için bunları kullanmanın bir yolu şu şekildedir:

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

Yukarıdaki örnekte isTypeSupported() öğesine iletilen Profil 2'ye sahip VP9 codec dizesinin video kodlama özelliklerinize göre güncellenmesi gerekir.

CSS'de, tuvalde, resimlerde ve korumalı içerikte HDR renkleri tanımlamanın henüz mümkün olmadığını unutmayın. Chrome ekibi bu konu üzerinde çalışıyor. Bizi izlemeye devam edin!

Windows ve Mac için kalıcı lisanslar

Şifrelenmiş Medya Uzantıları (EME) içindeki kalıcı lisans, lisansın cihazda kalıcı olarak saklanabileceği ve böylece uygulamaların sunucuya başka bir lisans isteği göndermeden lisansı belleğe yükleyebilmesi anlamına gelir. Çevrimdışı oynatma EME'de bu şekilde desteklenir.

Şu ana kadar, kalıcı lisansları destekleyen tek platformlar ChromeOS ve Android'di. Artık doğru değil. Korunan içeriği cihaz çevrimdışıyken EME ile oynatmak artık Windows ve Mac'te Chrome 64'te de mümkündür.

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 atıp şu adımları uygulayarak kalıcı lisansları kendiniz deneyebilirsiniz:

  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. "Oynat" düğmesini tıklayın ve videonun keyfini çıkarın!

Medya önceden yükleme varsayılanları "meta veri"dir

Diğer tarayıcıların uygulamalarıyla uyumlu hale gelen Chrome masaüstü, bant genişliğini ve kaynak kullanımını azaltmak amacıyla artık <video> ve <audio> öğeleri için varsayılan ön yükleme değerini "metadata" olarak ayarlıyor. Chrome 64'ten itibaren, bu yeni davranış yalnızca herhangi bir önceden yükleme değerinin ayarlanmadığı durumlarda geçerlidir. Web sitesi kendi önceden yüklemesini işlediği için medya öğesine bir MediaSource eklendiğinde önceden yükleme özelliğinin ipucunun silindiğini unutmayın.

Yani <video> önceden yükleme değeri artık "metadata" iken <video preload="auto"> önceden yükleme değeri "auto" olarak kalır. Resmi örneği deneyin.

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

Desteklenmeyen oynatmaRate, istisna oluşturur

Bir HTML spesifikasyonu değişikliğinin ardından, Chrome 63'te medya öğelerinin playbackRate değeri Chrome tarafından desteklenmeyen bir değere (ör. negatif bir değere) ayarlandığında "NotSupportedError" DOMException hatası gönderilir.

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

Bu arada, playbackRate negatif olduğunda, 0, 0625'ten küçük veya 16'dan fazla olduğunda Chrome'un mevcut uygulaması bu istisnayı oluşturur. Bunun nasıl olduğunu görmek için resmi örneği deneyin.

Gönderim Amacı | Chromestatus İ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 de bu konuda bir istisna değildi.

Videoda herhangi bir ses parçası yoksa Chrome masaüstünde (Windows, Mac, Linux ve ChromeOS) arka planda (ör. görünmeyen bir sekmede) oynatıldığında video otomatik olarak duraklatılır. Bu, yalnızca Chrome 62'deki MSE videoları için geçerli olan benzer bir değişikliğin devamı niteliğindedir.

Chromium Hatası

Aşırı oynatma hızları için sesi kapatma özelliğini kaldırın

Chrome 64'ten önce, kalite önemli ölçüde düştüğü için playbackRate 0,5'in altında veya 4'ün üzerinde olduğunda ses kapalıydı. Chrome, kalitenin düşürülmesi için Dalga Biçimi-Benzerlik-Çakışma-Ekleme (WSOLA) yaklaşımına geçtiğinden, artık sesin kapatılmasına gerek yoktur. Artık sesi çok yavaş ve süper hızlı çalabilirsiniz.

Chromium Hatası