- Developer web kini dapat memprediksi apakah pemutaran akan lancar dan hemat daya.
- Chrome kini mendukung pemutaran video HDR di Windows 10.
- Pemutaran offline dengan lisensi persisten kini didukung di Windows dan Mac.
- Nilai pramuat default untuk elemen
<video>
dan<audio>
sekarang adalah"metadata"
. - Error kini ditampilkan jika rasio pemutaran media tidak didukung.
- Chrome kini menjeda semua media yang hanya untuk video latar belakang.
- Audio tidak dibisukan lagi untuk playRate yang ekstrem.
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.
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.
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:
- Buka https://biograf-155113.appspot.com/ttt/episode-2/
- Klik "Sediakan saat offline" dan tunggu hingga video didownload.
- Nonaktifkan koneksi internet Anda.
- 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.
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.