Update media di Chrome 75

François Beaufort

Kemampuan media Chrome telah diupdate di versi 75. Dalam artikel ini, saya akan membahas fitur-fitur baru tersebut:

• 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 mengirimkan kueri ke browser tentang kemampuan decoding konten yang jelas perangkat berdasarkan informasi seperti codec, profil, resolusi, kecepatan bit, dll. Hal ini menunjukkan apakah pemutaran akan lancar (tepat waktu) dan hemat daya berdasarkan statistik pemutaran sebelumnya yang direkam oleh browser.

Spesifikasi Media Capabilities API, yang menentukan Info Decoding, sejak saat itu telah diperbarui untuk menangani konfigurasi media terenkripsi sehingga situs yang menggunakan media terenkripsi (EME) dapat memilih streaming media yang optimal.

Singkatnya, berikut cara kerja Info Dekode untuk EME. Coba 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 decoding dan rendering khusus, yang berarti dukungan dan performa codec yang 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 yang dikenal luas. Tindakan ini mereplikasi input yang diberikan ke requestMediaKeySystemAccess() EME dengan satu perbedaan utama: urutan input yang diberikan ke requestMediaKeySystemAccess() diratakan menjadi satu nilai di mana pun intent urutan adalah agar requestMediaKeySystemAccess() memilih subset yang didukungnya.

Info Decoding menjelaskan kualitas (kehalusan dan efisiensi daya) dukungan untuk satu pasangan streaming audio dan video tanpa membuat keputusan untuk pemanggil. Pemanggil tetap harus memesan konfigurasi media seperti yang dilakukan dengan requestMediaKeySystemAccess(). Hanya sekarang mereka menelusuri daftar itu sendiri.

navigator.mediaCapabilities.decodingInfo() menampilkan promise yang diselesaikan 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 ditampilkan. Dapat digunakan untuk meminta beberapa kunci 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.
}

Perhatikan bahwa info decoding untuk media terenkripsi memerlukan HTTPS.

Selain itu, perlu diketahui bahwa tindakan ini dapat memicu perintah pengguna di Android dan ChromeOS dengan cara yang sama seperti requestMediaKeySystemAccess(). Namun, metode ini tidak akan menampilkan lebih banyak perintah daripada requestMediaKeySystemAccess(), meskipun memerlukan lebih banyak panggilan untuk menyiapkan pemutaran media terenkripsi.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

HTMLVideoElement.playsInline

Chrome kini mendukung atribut boolean playsInline. Jika ada, atribut ini akan memberi petunjuk kepada browser bahwa video harus ditampilkan "inline" dalam dokumen secara default, yang dibatasi pada area pemutaran elemen.

Sama halnya dengan Safari, saat elemen video di iPhone tidak otomatis memasuki mode layar penuh saat pemutaran dimulai, petunjuk ini memungkinkan beberapa sematan memiliki pengalaman pemutaran video layar penuh otomatis. Developer web dapat menggunakannya untuk memilih tidak ikut pengalaman ini jika diperlukan.

<video playsinline></video>

Karena Chrome di Android dan Desktop tidak menerapkan layar penuh otomatis, petunjuk atribut elemen video playsInline tidak digunakan.

Intent to Ship | Chromestatus Tracker | Chromium Bug