Chrome'un medya özellikleri sürüm 75'te güncellendi. Bu makalede, aşağıdakileri içeren yeni özelliklerden bahsedeceğiz:
- Şifrelenmiş medya için oynatmanın sorunsuz olup olmayacağını ve güç tasarrufu sağlayıp sağlamayacağını tahmin etme.
- Video öğesinin
playsInlineözellik ipucu desteği.
Şifrelenmiş Medya: Kod Çözme Bilgileri
Web geliştiricileri Chrome 66'dan bu yana codec'ler, profil, çözünürlük, bit hızları vb. bilgilere dayanarak tarayıcıyı içeriğin şifre çözme yetenekleri hakkında net bir şekilde sorgulamak için Kod Çözme Bilgileri'ni kullanabiliyordu. Bu metrik, tarayıcı tarafından kaydedilen önceki oynatma istatistiklerine göre oynatmanın düzgün (zamanında) olup olmayacağını ve gücün verimli olup olmayacağını belirtir.
Kod Çözme Bilgilerini tanımlayan Media Capabilities API spesifikasyonu, şifrelenmiş medya (EME) kullanan web sitelerinin en uygun medya akışlarını seçebilmesi için şifrelenmiş medya yapılandırmalarını da işleyecek şekilde güncellenmiştir.
Özetle, EME için Bilgilerin Şifresini Çözme işlemi şu şekildedir. 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 da net oynatmalara kıyasla farklı codec desteği ve performansı anlamına gelir. Bu nedenle, navigator.mediaCapabilities.decodingInfo() öğesine iletilen medya yapılandırma nesnesinde yeni bir keySystemConfiguration anahtarı ayarlanmalıdır. Bu anahtarın değeri, çeşitli tanınmış EME türlerini barındıran bir sözlüktür. Bu işlem, EME'nin requestMediaKeySystemAccess() öğesine sağlanan girişleri önemli bir farkla çoğaltır: requestMediaKeySystemAccess() için sağlanan giriş dizileri, dizinin amacı requestMediaKeySystemAccess() tarafından desteklenen bir alt küme seçmek olan her yerde tek bir değere dönüştürülür.
Bilgi Kodu Çözme, arayanın kararını vermeden tek bir çift ses ve video akışı için sunulan desteğin kalitesini (sorunsuzluk ve güç verimliliği) tanımlar. Arayanlar, medya yapılandırmalarını requestMediaKeySystemAccess() öğesinde olduğu gibi sıralamaya devam etmelidir. Şimdi listede kendileri yürüyor.
navigator.mediaCapabilities.decodingInfo(), şu üç boole içeren bir nesneyle eşzamansız olarak çözümlenen bir söz döndürür: supported, smooth ve powerEfficient. Ancak bir keySystemConfiguration anahtarı ayarlandığında ve supported değeri 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 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 bilgilerinin kodunu çözmek için HTTPS gerektiğini unutmayın.
Ayrıca, bu uzantının Android ve ChromeOS'te requestMediaKeySystemAccess() ile aynı şekilde kullanıcı istemini tetikleyebileceğini unutmayın. Şifrelenmiş medya oynatmayı ayarlamak için daha fazla arama gerekmesine rağmen en fazla requestMediaKeySystemAccess() istemi gösterir.
Deneme Amacı | Chromestatus İzleyici | Chromium Hatası
HTMLVideoElement.playsInline
Chrome artık playsInline boole özelliğini destekliyor. Bu etiket varsa tarayıcıya videonun, varsayılan olarak öğenin oynatma alanıyla sınırlı olacak şekilde dokümanda "satır içi" görüntülenmesi gerektiğini belirtir.
iPhone'daki video öğelerinin oynatma başladığında otomatik olarak tam ekran moduna girmediği Safari'ye benzer bir şekilde bu ipucu, bazı yerleştirilen kullanıcıların otomatik olarak tam ekran video oynatma deneyimi yaşamasına olanak tanır. Web geliştiricileri, gerekirse bu deneyimi devre dışı bırakmak için kullanabilir.
<video playsinline></video>
Android ve Masaüstündeki Chrome'da otomatik tam ekran uygulanmadığından, playsInline video öğesi özellik ipucu kullanılmaz.