Update media di Chrome 63/64

François Beaufort
François Beaufort
GitHub

Kemampuan Media - Decoding Info API

Saat ini, developer web mengandalkan isTypeSupported() atau canPlayType() untuk mengetahui secara tidak jelas apakah beberapa media dapat didekode atau tidak. Pertanyaan sebenarnya adalah: "seberapa baik kinerja pada perangkat ini?"

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

Singkatnya, berikut ini 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 sampai menemukan yang terbaik (smooth dan powerEfficient) dan menggunakannya untuk memutar streaming media yang sesuai. Ngomong-ngomong, implementasi Chrome saat ini didasarkan pada informasi pemutaran yang direkam sebelumnya. Atribut ini menentukan smooth sebagai benar (true) jika persentase frame yang dihapus kurang dari 10%, sementara powerEfficient bernilai benar (true) jika lebih dari 50% frame didekode oleh hardware. Frame kecil selalu dianggap hemat daya.

Sebaiknya gunakan cuplikan yang mirip dengan yang di bawah ini untuk mendeteksi ketersediaan dan kembali ke implementasi Anda 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 masukan sebanyak mungkin dari developer yang menggunakan Decoding Info API (bagian dari Kemampuan Media) di kolom ini, sebelumnya kami telah menambahkan fitur ini di Chrome 64 sebagai uji coba origin.

Uji coba berhasil berakhir pada April 2018.

Niat untuk Bereksperimen | Rencana untuk Mengirimkan | Pelacak status Chrome | Bug Chromium

Pemutaran video HDR di Windows 10

Video Rentang Dinamis Tinggi (HDR) memiliki kontras yang lebih tinggi, yang mengungkapkan bayangan yang akurat dan mendetail, serta sorotan yang memukau dengan lebih jernih dari sebelumnya. Selain itu, dukungan untuk wide color gamut membuat warna lebih cerah.

Perbandingan simulasi SDR vs HDR (untuk melihat HDR sesungguhnya memerlukan layar HDR)
Perbandingan simulasi SDR vs HDR (untuk melihat HDR sebenarnya memerlukan layar HDR)

Karena pemutaran 10-bit VP9 Profile 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 dalam 4K (ULTRA HD) di YouTube dan periksa apakah video tersebut memutar HDR dengan melihat setelan kualitas pemutar YouTube.

Setelan kualitas pemutar YouTube yang dilengkapi HDR
Setelan kualitas pemutar YouTube yang dilengkapi HDR

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

Developer web dapat mendeteksi perkiraan color gamut yang didukung oleh perangkat output dengan kueri media color-gamut terbaru dan jumlah bit yang digunakan untuk menampilkan warna di layar dengan screen.colorDepth. Berikut adalah salah satu cara menggunakannya untuk mendeteksi apakah VP9 HDR didukung, misalnya:

// 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 Profil 2 yang diteruskan ke isTypeSupported() dalam contoh di atas perlu diperbarui berdasarkan properti encoding video Anda.

Perhatikan bahwa Anda belum dapat menentukan warna HDR dalam CSS, kanvas, gambar, dan konten yang dilindungi. Tim Chrome sedang mengerjakannya. Nantikan kabar terbarunya.

Lisensi persisten untuk Windows dan Mac

Lisensi persisten dalam Ekstensi Media Terenkripsi (EME) berarti lisensi dapat dipertahankan di perangkat sehingga aplikasi dapat memuat lisensi ke dalam memori tanpa mengirim permintaan lisensi lain ke server. Ini adalah 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 lisensi tetap sendiri dengan memeriksa Sample Media PWA dan mengikuti langkah-langkah berikut:

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

Pramuat media ditetapkan secara default ke "metadata"

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

Dengan kata lain, nilai pramuat <video> kini menjadi "metadata", sementara nilai pramuat <video preload="auto"> tetap menjadi "auto". Cobalah contoh resmi.

Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium

playbackRate yang tidak didukung meningkatkan pengecualian

Setelah perubahan spesifikasi HTML, jika playbackRate elemen media ditetapkan ke nilai yang tidak didukung oleh Chrome (mis., 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, implementasi Chrome saat ini memunculkan pengecualian ini jika playbackRate negatif, kurang dari 0,0625, atau lebih dari 16. Cobalah contoh resmi untuk melihat penerapannya.

Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium

Pengoptimalan trek video latar belakang

Tim Chrome selalu berusaha menemukan cara baru untuk meningkatkan masa pakai baterai, tidak terkecuali Chrome 63.

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 RKG di Chrome 62.

Bug Chromium

Hapus pembisuan untuk playbackRate yang ekstrem

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

Bug Chromium