Update media di Chrome 75

François Beaufort
François Beaufort

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.

ALT_TEXT_HERE
Dialog konten yang dilindungi

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