Kemampuan media Chrome diupdate pada versi 75. Dalam artikel ini, saya akan membahas fitur-fitur baru tersebut yang meliputi:
- Memprediksi apakah pemutaran akan lancar dan hemat daya untuk media terenkripsi.
- Dukungan petunjuk atribut
playsInline
elemen video.
Media Terenkripsi: Info Dekode
Sejak Chrome 66, developer web dapat menggunakan Info Decoding untuk mengkueri browser tentang kemampuan decoding konten yang jelas dari perangkat berdasarkan informasi seperti codec, profil, resolusi, kecepatan bit, dll. Hal ini menunjukkan apakah pemutaran akan lancar (secara tepat waktu) dan hemat daya berdasarkan statistik pemutaran yang direkam oleh browser sebelumnya.
Spesifikasi Media Capabilities API, yang menentukan Info Decoding, telah diperbarui untuk menangani konfigurasi media terenkripsi juga sehingga situs yang menggunakan media terenkripsi (EME) dapat memilih aliran media yang optimal.
Singkatnya, berikut cara kerja Info Decoding untuk EME. Cobalah contoh resmi.
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.
});
Pemutaran EME memiliki jalur kode rendering dan decoding khusus, yang berarti
dukungan dan performa codec berbeda dibandingkan dengan pemutaran yang jelas. Oleh karena itu, kunci
keySystemConfiguration
baru harus ditetapkan dalam objek konfigurasi media
yang diteruskan ke navigator.mediaCapabilities.decodingInfo()
. Nilai kunci ini adalah
kamus yang menyimpan sejumlah jenis EME terkenal. Ini mereplikasi
input yang diberikan ke requestMediaKeySystemAccess()
EME dengan satu
perbedaan utama: urutan input yang diberikan ke requestMediaKeySystemAccess()
disatukan menjadi nilai
tunggal jika intent urutan tersebut adalah agar requestMediaKeySystemAccess()
memilih subset yang didukungnya.
Info Decoding menjelaskan kualitas (kehalusan dan efisiensi daya)
dukungan untuk satu pasang streaming audio dan video tanpa membuat keputusan
untuk pemanggil. Pemanggil harus tetap mengurutkan konfigurasi media seperti yang dilakukan pada
requestMediaKeySystemAccess()
. Hanya sekarang mereka yang
menyusun daftar itu sendiri.
navigator.mediaCapabilities.decodingInfo()
menampilkan promise yang di-resolve secara asinkron dengan objek yang berisi tiga boolean: supported
, smooth
, dan powerEfficient
. Namun, saat kunci keySystemConfiguration
ditetapkan dan
supported
adalah true
, objek MediaKeySystemAccess
lain bernama
keySystemAccess
juga akan ditampilkan. Alat ini dapat digunakan untuk meminta beberapa tombol media
dan menyiapkan pemutaran media terenkripsi. Berikut contohnya:
// 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.
}
Perlu diketahui bahwa info dekode untuk media terenkripsi memerlukan HTTPS.
Selain itu, perhatikan bahwa hal ini dapat memicu perintah pengguna di Android dan ChromeOS dengan cara
yang sama seperti requestMediaKeySystemAccess()
. Namun, perintah tersebut tidak akan menampilkan lebih banyak perintah daripada
requestMediaKeySystemAccess()
, meskipun
memerlukan lebih banyak panggilan untuk menyiapkan pemutaran media terenkripsi.
Niat untuk Melakukan Eksperimen | Pelacak Status Chrome | Bug Chromium
HTMLVideoElement.playsInline
Chrome kini mendukung atribut boolean playsInline
. Jika ada, elemen ini memberi petunjuk kepada browser bahwa video harus ditampilkan "inline" dalam dokumen secara default, yang dibatasi pada area pemutaran elemen.
Sama seperti Safari, dengan elemen video di iPhone tidak secara otomatis masuk ke mode layar penuh saat pemutaran dimulai, petunjuk ini memungkinkan beberapa penyemat memiliki pengalaman pemutaran video layar penuh otomatis. Pengembang web dapat menggunakannya untuk menyisih dari pengalaman ini jika diperlukan.
<video playsinline></video>
Karena Chrome di Android dan Desktop tidak menerapkan layar penuh otomatis, petunjuk atribut elemen video playsInline
tidak akan digunakan.
Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium