Chrome'un medya özellikleri sürüm 75'te güncellendi. Bu makalede, şunları içeren yeni özelliklerden bahsedeceğiz:
- Şifrelenmiş medya için oynatmanın sorunsuz ve güç açısından verimli olup olmayacağını tahmin etme
- Video öğesinin
playsInlineözelliğiyle ilgili ipucu desteği.
Şifrelenmiş Medya: Bilgilerin Şifresini Çözme
Chrome 66'dan bu yana web geliştiricileri, codec'ler, profil, çözünürlük, bit hızları gibi bilgilere dayanarak cihazın net içerik kod çözme yeteneklerini tarayıcıya sorgulamak için Bilgilerin Şifresini Çözme özelliğini kullanabiliyor. Bu özellik, tarayıcı tarafından kaydedilen önceki oynatma istatistiklerine dayalı olarak oynatmanın sorunsuz (zamanlı) ve güç verimli mi olacağını belirtir.
Kod Çözme Bilgisi'ni tanımlayan Media Capabilities API spesifikasyonu, şifrelenmiş medya yapılandırmalarını da işleyebilecek şekilde güncellendi. Böylece, şifrelenmiş medya (EME) kullanan web siteleri en uygun medya akışlarını seçebilir.
EME için Kod Çözme Bilgileri'nin işleyiş şeklini kısaca özetlemek gerekirse: Resmi örneği deneyin.
const encryptedMediaConfig = {
type: 'media-source', // or 'file'
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
},
keySystemConfiguration: {
keySystem: 'com.widevine.alpha',
videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
}
};
navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
if (!result.supported) {
console.log('Argh! This encrypted media configuration is not supported.');
return;
}
if (!result.keySystemAccess) {
console.log('Argh! Encrypted media support is not available.')
return;
}
console.log('This encrypted media configuration is supported.');
console.log('Playback should be' +
(result.smooth ? '' : ' NOT') + ' smooth and' +
(result.powerEfficient ? '' : ' NOT') + ' power efficient.');
// TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});
EME oynatmalarında özel kod çözme ve oluşturma kod yolları bulunur. Bu, net oynatmalara kıyasla farklı codec desteği ve performansı anlamına gelir. Bu nedenle, navigator.mediaCapabilities.decodingInfo()'a iletilen medya yapılandırma nesnesinde yeni bir keySystemConfiguration anahtarı ayarlanmalıdır. Bu anahtarın değeri, iyi bilinen EME türlerini barındıran bir sözlüktür. Bu, EME'nin requestMediaKeySystemAccess() özelliğine sağlanan girişleri tek bir önemli fark ile kopyalar: requestMediaKeySystemAccess() özelliğine sağlanan giriş sıraları, sıranın amacı requestMediaKeySystemAccess() özelliğinin desteklediği bir alt kümeyi seçmesini sağlamak olduğunda tek bir değere düzleştirilir.
Kod Çözme Bilgileri, arayan için bir karar vermeden tek bir ses ve video akışı çifti için destek kalitesini (sürükleyicilik ve güç verimliliği) açıklar. Aracılar, medya yapılandırmalarını requestMediaKeySystemAccess() ile yaptıkları gibi sipariş etmelidir. Ancak artık listeyi kendileri yürüyorlar.
navigator.mediaCapabilities.decodingInfo(), üç boole içeren bir nesneyle eşzamansız olarak çözümlenen bir işlev döndürür: supported, smooth ve powerEfficient. Ancak bir keySystemConfiguration anahtarı ayarlandığında ve supported true olduğunda, keySystemAccess adlı başka bir MediaKeySystemAccess nesnesi de döndürülür. Bazı medya anahtarlarını istemek ve şifrelenmiş medya oynatmayı ayarlamak için kullanılabilir. Aşağıda bununla ilgili bir örnek verilmiştir:
// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
navigator.mediaCapabilities.decodingInfo(mediaConfig)
);
// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
if (result.supported && result.smooth) {
bestConfig = result;
break;
}
}
if (bestConfig) {
const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
// TODO: rest of EME path as-is
} else {
// Argh! No smooth configs found.
// TODO: Maybe choose the lowest resolution and framerate available.
}
Şifrelenmiş medya için kod çözme bilgilerinin HTTPS gerektirdiğini unutmayın.
Ayrıca, requestMediaKeySystemAccess() ile aynı şekilde Android ve ChromeOS'te kullanıcı istemi tetikleyebileceğini unutmayın. Ancak şifrelenmiş medya oynatma özelliğini ayarlamak için daha fazla arama yapılmasına rağmen requestMediaKeySystemAccess()'ten daha fazla istem gösterilmez.
Intent to Experiment | Chromestatus Tracker | Chromium Bug
HTMLVideoElement.playsInline
Chrome artık playsInline boole özelliğini desteklemektedir. Bu özellik mevcutsa tarayıcıya, videonun varsayılan olarak dokümanda "satır içi" ve öğenin oynatma alanına sığacak şekilde gösterilmesi gerektiğini belirtir.
iPhone'daki video öğelerinin oynatma başladığında otomatik olarak tam ekran moduna girmediği Safari'ye benzer şekilde, bu ipucu bazı yerleşticilerin otomatik tam ekran video oynatma deneyimi yaşamasını sağlar. Web geliştiriciler, gerekirse bu deneyimin kapsamı dışında kalmayı tercih etmek için bu özelliği kullanabilir.
<video playsinline></video>
Android ve masaüstündeki Chrome'da otomatik tam ekran özelliği uygulanmadığından playsInline video öğesi özellik ipucu kullanılmaz.