- Web geliştiriciler artık oynatmanın sorunsuz ve güç açısından verimli olup olmayacağını tahmin edebilir.
- Chrome artık Windows 10'da HDR video oynatmayı destekliyor.
- Kalıcı lisanslarla çevrimdışı oynatma artık Windows ve Mac'te destekleniyor.
<video>ve<audio>öğeleri için varsayılan önceden yükleme değeri artık"metadata".- Medya oynatma hızı desteklenmediğinde artık hata veriliyor.
- Chrome artık yalnızca video içeren tüm arka plan medyalarını duraklatıyor.
- Aşırı oynatma hızında ses artık kapatılmıyor.
Media Capabilities - Decoding Info API
Günümüzde web geliştiriciler, bazı medyaların kodunun çözülüp çözülemeyeceğini kabaca bilmek için isTypeSupported() veya canPlayType()'ye güveniyor. Ancak asıl soru şu olmalıdır:
"Bu cihazda ne kadar iyi performans gösterir?"
Bu, önerilen Media Capabilities'in çözmek istediği sorunlardan biridir: tarayıcıya, cihazın kod çözme yetenekleri hakkında bilgi (ör. codec'ler, profil, çözünürlük, bit hızları) sorgulamak için kullanılan bir API. Bu API, tarayıcı tarafından kaydedilen önceki oynatma istatistiklerine göre oynatmanın sorunsuz ve güç açısından verimli olup olmadığı gibi bilgileri ortaya çıkarır.
Özetle, Decoding Info API'nin şu anki işleyiş şekli: Resmi örneğe göz atı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 iyi yapılandırmayı bulana kadar farklı medya yapılandırmalarını deneyebilir (smooth ve powerEfficient) ve uygun medya akışını oynatmak için bu yapılandırmayı kullanabilirsiniz. Bu arada, Chrome'un mevcut uygulaması daha önce kaydedilmiş oynatma bilgilerine dayanmaktadır. Bırakılan karelerin yüzdesi% 10'dan az olduğunda smooth, karelerin% 50'den fazlası donanım tarafından çözüldüğünde ise powerEfficient doğru olarak tanımlanır. Küçük çerçeveler her zaman enerji açısından verimli kabul edilir.
Kullanılabilirliği algılamak ve bu API'yi desteklemeyen tarayıcılarda mevcut uygulamanıza geri 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
Decoding Info API'yi (Media Capabilities'in bir parçası) sahada 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, Nisan 2018'de başarıyla sona erdi.
Intent to Experiment | Intent to Ship | Chromestatus Tracker | Chromium Bug
Windows 10'da HDR video oynatma
Yüksek Dinamik Aralık (HDR) videoları daha yüksek kontrasta sahiptir. Bu sayede, her zamankinden daha net bir şekilde hassas ve ayrıntılı gölgeler ile çarpıcı parlak alanlar gösterilir. Ayrıca, geniş renk gamı desteği sayesinde renkler daha canlıdır.
VP9 Profile 2 10 bit oynatma özelliği artık Windows 10 Fall Creator Update için Chrome'da desteklendiğinden Chrome, Windows 10 HDR modundayken HDR video oynatmayı da destekler. Teknik bir not olarak, Chrome 64 artık scRGB renk profilini destekliyor. Bu da medyanın HDR olarak oynatılmasına olanak tanıyor.
YouTube'da The World in HDR in 4K (ULTRA HD) (4K HDR Kalitesinde HDR Dünyası) videosunu izleyerek bu özelliği deneyebilir ve YouTube oynatıcı kalite ayarına bakarak videonun HDR olarak oynatıldığını kontrol edebilirsiniz.
Şimdilik ihtiyacınız olanlar Windows 10 Fall Creator Update, HDR uyumlu bir grafik kartı ve ekran (ör. NVIDIA 10 serisi kart, LG HDR TV veya monitör) ve Windows ekran ayarlarında HDR modunu etkinleştirmektir.
Web geliştiriciler, son color-gamut medya sorgusu ile çıkış cihazının desteklediği 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 algılamak için bu yöntemlerden birini kullanabilirsiniz:
// 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 VP9 codec dizesi (Profile 2), video kodlama özelliklerinize göre güncellenmelidir.
HDR renklerinin CSS, canvas, resimler ve korumalı içeriklerde henüz tanımlanamadığını unutmayın. Chrome ekibi bu konu üzerinde çalışıyor. Bizi izlemeye devam edin!
Windows ve Mac için kalıcı lisanslar
Encrypted Media Extensions (EME)'daki kalıcı lisans, uygulamaların sunucuya başka bir lisans isteği göndermeden lisansı belleğe yükleyebilmesi için lisansın cihazda kalıcı olarak saklanabileceği anlamına gelir. EME'de çevrimdışı oynatma şu şekilde desteklenir.
Şimdiye kadar, kalıcı lisansları destekleyen tek platformlar ChromeOS ve Android'di. Bu durum artık geçerli değil. Cihaz çevrimdışıyken EME üzerinden korumalı içerik oynatma özelliği artık Windows ve Mac'teki Chrome 64'te de kullanılabiliyor.
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.
});
Örnek Medya PWA'sına göz atıp aşağıdaki adımları uygulayarak kalıcı lisansları kendiniz deneyebilirsiniz:
- https://biograf-155113.appspot.com/ttt/episode-2/ adresine gidin.
- "Çevrimdışı kullanılabilir yap"ı tıklayın ve videonun indirilmesini bekleyin.
- İnternet bağlantınızı kapatın.
- "Oynat" düğmesini tıklayın ve videonun keyfini çıkarın.
Medya önceden yükleme varsayılanı "meta veri" olarak ayarlanır.
Diğer tarayıcıların uygulamalarıyla eşleşen Chrome masaüstü, artık bant genişliğini ve kaynak kullanımını azaltmak için <video> ve <audio> öğelerinin varsayılan ön yükleme değerini "metadata" olarak ayarlıyor. Chrome 64'ten itibaren bu yeni davranış yalnızca önceden yükleme değerinin ayarlanmadığı durumlarda geçerlidir. Web sitesi kendi ön yüklemesini yaptığından, medya öğesine MediaSource eklenmişse ön yükleme özelliğinin ipucunun atılacağını unutmayın.
Başka bir deyişle, <video> ön yükleme değeri artık "metadata" iken <video
preload="auto"> ön yükleme değeri "auto" olarak kalır. Resmi örneği deneyin.
Intent to Ship | Chromestatus Tracker | Chromium Bug
Desteklenmeyen playbackRate istisna oluşturur
HTML spesifikasyonunda yapılan bir değişiklik nedeniyle, medya öğelerinin playbackRate özelliği Chrome tarafından desteklenmeyen bir değere (ör. negatif değer) ayarlandığında Chrome 63'te "NotSupportedError" DOMException hatası veriliyor.
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 olduğunda, 0,0625'ten küçük olduğunda veya 16'dan büyük olduğunda bu istisnayı oluşturur. Bu özelliği uygulamalı olarak görmek için resmi örneği deneyin.
Intent to Ship | Chromestatus Tracker | Chromium Bug
Arka plan video parçası optimizasyonları
Chrome ekibi, pil ömrünü iyileştirmenin yeni yollarını bulmaya çalışır ve Chrome 63 de bu konuda bir istisna değildir.
Video ses parçası içermiyorsa Chrome masaüstü (Windows, Mac, Linux ve ChromeOS) sürümünde arka planda (ör. görünür olmayan bir sekmede) oynatıldığında otomatik olarak duraklatılır. Bu değişiklik, Chrome 62'deki MSE videoları için geçerli olan benzer bir değişikliğin devamıdır.
Aşırı oynatma hızlarında sessize alma özelliğini kaldırma
Chrome 64'ten önce, kalite önemli ölçüde düştüğü için playbackRate değeri 0,5'in altında veya 4'ün üzerinde olduğunda ses kapatılıyordu. Chrome, kalite düşürme için Waveform-Similarity-Overlap-Add (WSOLA) yaklaşımına geçtiğinden artık sesin kapatılması gerekmiyor. Artık sesi çok yavaş ve çok hızlı oynatabilirsiniz.