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 secara samar-samar tahu apakah beberapa media dapat didekode atau tidak. Pertanyaan sebenarnya adalah: "seberapa baik performanya di perangkat ini?"

Ini adalah salah satu hal yang ingin disampaikan oleh Kemampuan Media pecahkan: API untuk mengkueri browser tentang kemampuan decoding perangkat berdasarkan informasi seperti codec, profil, resolusi, kecepatan bit, dll. akan mengekspos informasi seperti apakah pemutaran harus mulus dan hemat daya berdasarkan statistik pemutaran sebelumnya yang direkam oleh browser.

Secara singkat, 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 sampai menemukan yang terbaik (smooth dan powerEfficient) lalu menggunakannya untuk memutar media yang sesuai feed. Omong-omong, implementasi Chrome saat ini didasarkan pada informasi pemutaran yang direkam. Kolom ini menentukan smooth sebagai benar (true) jika persentase frame yang dihapus kurang dari 10% sementara powerEfficient benar saat lebih banyak dari 50% {i>frame<i} didekode oleh perangkat keras. Bingkai kecil selalu dianggap hemat daya.

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

Uji coba berhasil berakhir pada April 2018.

Niat untuk Bereksperimen | Niat Melakukan Pengiriman | Pelacak Chromestatus | Bug Chromium

Pemutaran video HDR di Windows 10

Video Rentang Dinamis Tinggi (HDR) memiliki kontras yang lebih tinggi, menampilkan detail bayangan yang detail dan sorotan yang menakjubkan yang lebih jelas dari sebelumnya. Selain itu mendukung wide color gamut berarti warna lebih cerah.

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

Karena VP9 Profile 2, pemutaran 10-bit 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 warna scRGB yang memungkinkan media diputar dalam HDR.

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

Setelan kualitas pemutar YouTube dengan HDR
Setelan kualitas pemutar YouTube dengan HDR

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

Developer web dapat mendeteksi perkiraan color gamut yang didukung oleh output perangkat dengan kueri media color-gamut terbaru dan jumlah bit yang digunakan untuk menampilkan warna di layar dengan screen.colorDepth. Berikut adalah salah satu cara untuk 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() di 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 menanganinya. Nantikan kabar terbarunya.

Lisensi tetap untuk Windows dan Mac

Lisensi persisten di Ekstensi Media Terenkripsi (EME) berarti lisensi tersebut dapat disimpan di perangkat sehingga aplikasi dapat memuat lisensi ke dalam memori tanpa mengirimkan 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. Hal ini sudah tidak benar lagi. Memutar konten yang dilindungi melalui EME sambil perangkat sedang offline sekarang juga dapat dilakukan di Chrome 64 untuk 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 memeriksa Contoh PWA Media dan mengikuti langkah-langkah berikut:

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

Pramuat media ditetapkan secara default ke "metadata"

Mencocokkan browser lain implementasi, desktop Chrome kini menetapkan melakukan pramuat nilai untuk elemen <video> dan <audio> ke "metadata" agar mengurangi penggunaan {i>bandwidth<i} dan sumber daya. Mulai Chrome 64, perilaku baru ini hanya berlaku saat tidak ada nilai pramuat yang ditetapkan. Perhatikan bahwa atribut pramuat petunjuk dihapus saat MediaSource dilampirkan ke elemen media sebagai situs web tersebut menangani pramuatnya sendiri.

Dengan kata lain, nilai pramuat <video> sekarang adalah "metadata", sedangkan nilai pramuat <video preload="auto"> tetap "auto". Cobalah sampel resmi.

Niat Mengirimkan | Pelacak Chromestatus | Bug Chromium

PlaybackRate yang tidak didukung menimbulkan pengecualian

Setelah perubahan spesifikasi HTML, saat elemen media playbackRate ditetapkan ke nilai yang tidak didukung oleh Chrome (mis. nilai negatif), "NotSupportedError" DOMException 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
}

Omong-omong, implementasi Chrome saat ini memunculkan pengecualian ini saat playbackRate adalah negatif, kurang dari 0,0625, atau lebih dari 16. Coba melihat contoh resmi untuk melihat cara kerjanya.

Niat Mengirimkan | Pelacak Chromestatus | Bug Chromium

Pengoptimalan trek video di latar belakang

Tim Chrome selalu berusaha menemukan cara baru untuk meningkatkan daya tahan baterai dan Tidak terkecuali Chrome 63.

Jika video tidak berisi trek audio apa pun, 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 playbackRates ekstrem

Sebelum Chrome 64, suara dibisukan jika playbackRate di bawah 0,5 atau di atas 4 seiring menurunnya kualitas secara signifikan. Karena Chrome beralih ke Pendekatan Waveform-Similarity-Overlap-Add (WSOLA) untuk penurunan kualitas suara, tidak perlu dibisukan lagi. Itu berarti Anda dapat memutar suara dengan sangat lambat dan menjadi super cepat sekarang.

Bug Chromium