Update media di Chrome 63/64

François Beaufort
François Beaufort
GitHub

Media Capabilities - Decoding Info API

Saat ini, developer web mengandalkan isTypeSupported() atau canPlayType() untuk mengetahui secara samar-samar apakah beberapa media dapat didekode atau tidak. Namun, pertanyaan sebenarnya adalah: "seberapa baik performanya di perangkat ini?"

Inilah salah satu hal yang ingin dipecahkan oleh Media Capabilities yang diusulkan: API untuk mengkueri browser tentang kemampuan decoding perangkat berdasarkan informasi seperti codec, profil, resolusi, bitrate, dll. API ini akan mengekspos informasi seperti apakah pemutaran harus lancar dan hemat daya berdasarkan statistik pemutaran sebelumnya yang direkam oleh browser.

Singkatnya, berikut cara kerja Decoding Info API untuk saat ini. Lihat contoh resmi.

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  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
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

Anda dapat mencoba berbagai konfigurasi media hingga menemukan konfigurasi terbaik (smooth dan powerEfficient) dan menggunakannya untuk memutar aliran media yang sesuai. Ngomong-ngomong, penerapan Chrome saat ini didasarkan pada informasi pemutaran yang direkam sebelumnya. Menentukan smooth sebagai benar jika persentase frame yang di-drop kurang dari 10%, sedangkan powerEfficient benar jika lebih dari 50% frame didekode oleh hardware. Frame kecil selalu dianggap hemat daya.

Sebaiknya gunakan cuplikan yang mirip dengan cuplikan di bawah untuk mendeteksi ketersediaan dan melakukan penggantian ke implementasi saat ini untuk browser yang tidak mendukung API ini.

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

Tersedia untuk uji coba origin

Untuk mendapatkan sebanyak mungkin masukan dari developer yang menggunakan Decoding Info API (bagian dari Kemampuan Media) di lapangan, kami sebelumnya telah menambahkan fitur ini di Chrome 64 sebagai uji coba origin.

Uji coba berhasil diakhiri pada April 2018.

Intent to Experiment | Intent to Ship | Chromestatus Tracker | Bug Chromium

Pemutaran video HDR di Windows 10

Video High Dynamic Range (HDR) memiliki kontras yang lebih tinggi, sehingga menampilkan bayangan yang presisi dan detail, serta highlight yang menakjubkan dengan kejelasan yang lebih baik dari sebelumnya. Selain itu, dukungan untuk gamut warna yang luas berarti warna lebih cerah.

Perbandingan SDR vs. HDR yang disimulasikan (untuk melihat HDR yang sebenarnya, diperlukan layar HDR)
Perbandingan SDR vs. HDR yang disimulasikan (untuk melihat HDR yang sebenarnya diperlukan layar HDR)

Karena pemutaran 10 bit VP9 Profil 2 kini didukung di Chrome untuk Windows 10 Fall Creator Update, Chrome juga mendukung pemutaran video HDR saat Windows 10 dalam mode HDR. Secara teknis, Chrome 64 kini mendukung profil warna scRGB yang memungkinkan media diputar kembali dalam HDR.

Anda dapat mencobanya dengan menonton The World in HDR in 4K (ULTRA HD) di YouTube dan memeriksa apakah video diputar dalam HDR dengan melihat setelan kualitas pemutar YouTube.

Setelan kualitas pemutar YouTube yang menampilkan HDR
Setelan kualitas pemutar YouTube yang menampilkan HDR

Yang Anda butuhkan saat ini adalah Windows 10 Fall Creator Update, kartu grafis dan layar yang kompatibel dengan HDR (misalnya, kartu seri 10 NVIDIA, TV atau monitor HDR LG), dan aktifkan mode HDR di setelan tampilan Windows.

Developer web dapat mendeteksi gamut warna perkiraan yang didukung oleh perangkat output dengan kueri media gamut warna terbaru dan jumlah bit yang digunakan untuk menampilkan warna di layar dengan screen.colorDepth. Berikut salah satu cara menggunakan kode tersebut untuk mendeteksi apakah VP9 HDR didukung atau tidak:

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

String codec VP9 dengan Profile 2 yang diteruskan ke isTypeSupported() dalam contoh di atas perlu diperbarui berdasarkan properti encoding video Anda.

Perhatikan bahwa saat ini belum memungkinkan untuk menentukan warna HDR di CSS, canvas, gambar, dan konten yang dilindungi. Tim Chrome sedang mengupayakannya. Nantikan kabar terbarunya.

Lisensi persisten untuk Windows dan Mac

Lisensi persisten di Encrypted Media Extensions (EME) berarti lisensi dapat dipertahankan di perangkat sehingga aplikasi dapat memuat lisensi ke dalam memori tanpa mengirim permintaan lisensi lain ke server. Berikut cara pemutaran offline didukung di EME.

Hingga saat ini, ChromeOS dan Android adalah satu-satunya platform yang mendukung lisensi persisten. Hal itu tidak benar lagi. Memutar konten yang dilindungi melalui EME saat perangkat offline kini juga dapat dilakukan di Chrome 64 di Windows dan Mac.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

Anda dapat mencoba sendiri lisensi persisten dengan melihat PWA Media Contoh dan mengikuti langkah-langkah berikut:

  1. Buka https://biograf-155113.appspot.com/ttt/episode-2/
  2. Klik "Sediakan offline" dan tunggu hingga video didownload.
  3. Nonaktifkan koneksi internet Anda.
  4. Klik tombol "Putar" dan nikmati videonya.

Pemuatan awal media secara default adalah "metadata"

Sesuai dengan implementasi browser lain, Chrome desktop kini menetapkan nilai pemuatan awal default untuk elemen <video> dan <audio> ke "metadata" untuk mengurangi penggunaan bandwidth dan resource. Mulai Chrome 64, perilaku baru ini hanya berlaku untuk kasus saat tidak ada nilai pramuat yang ditetapkan. Perhatikan bahwa petunjuk atribut pramuat dihapus saat MediaSource dilampirkan ke elemen media karena situs menangani pramuatnya sendiri.

Dengan kata lain, nilai pra-muat <video> kini menjadi "metadata", sedangkan nilai pra-muat <video preload="auto"> tetap "auto". Coba contoh resmi.

Maksud untuk Meluncurkan | Pelacak Status Chrome | Bug Chromium

playbackRate yang tidak didukung akan memunculkan pengecualian

Setelah perubahan spesifikasi HTML, saat playbackRate elemen media disetel ke nilai yang tidak didukung oleh Chrome (misalnya, nilai negatif), "NotSupportedError" DOMException akan ditampilkan di Chrome 63.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

Ngomong-ngomong, penerapan Chrome saat ini memunculkan pengecualian ini saat playbackRate bernilai negatif, kurang dari 0,0625, atau lebih dari 16. Coba contoh resmi untuk melihat cara kerjanya.

Maksud untuk Meluncurkan | Pelacak Status Chrome | Bug Chromium

Pengoptimalan trek video latar belakang

Tim Chrome selalu berupaya menemukan cara baru untuk meningkatkan daya tahan baterai dan Chrome 63 tidak terkecuali.

Jika video tidak berisi trek audio, video akan otomatis dijeda saat diputar di latar belakang (misalnya, di tab yang tidak terlihat) di Chrome desktop (Windows, Mac, Linux, dan ChromeOS). Ini adalah tindak lanjut dari perubahan serupa yang hanya berlaku untuk video MSE di Chrome 62.

Bug Chromium

Menghapus pembisuan untuk playbackRate ekstrem

Sebelum Chrome 64, suara akan diredam jika playbackRate di bawah 0,5 atau di atas 4 karena kualitasnya menurun secara signifikan. Karena Chrome telah beralih ke pendekatan Waveform-Similarity-Overlap-Add (WSOLA) untuk penurunan kualitas, suara tidak perlu lagi dibisukan. Artinya, Anda dapat memutar suara dengan sangat lambat dan sangat cepat sekarang.

Bug Chromium