- Developer web kini dapat memprediksi apakah pemutaran akan berjalan 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
<video>
dan Elemen<audio>
sekarang menjadi"metadata"
. - Error kini ditampilkan saat media kecepatan pemutaran tidak didukung.
- Chrome kini menjeda semua media khusus video latar belakang.
- Audio tidak dibisukan lagi selama playbackRate ekstrem.
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.
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.
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:
- Buka https://biograf-155113.appspot.com/ttt/episode-2/
- Klik "Jadikan tersedia saat offline" dan tunggu video selesai didownload.
- Nonaktifkan koneksi internet.
- 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.
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.