Dalam artikel ini, saya akan membahas fitur media baru Chrome 73 yang meliputi:
- Tombol media hardware kini didukung untuk mengontrol pemutaran media di {i>desktop<i}.
- Developer web dapat mengajukan kueri apakah kebijakan HDCP tertentu dapat diterapkan.
- Picture-in-Picture Otomatis di PWA desktop dan "Lewati Iklan" in Picture-in-Picture akan hadir ke uji coba origin.
- PWA desktop diizinkan untuk fitur putar otomatis dengan suara.
Dukungan Kunci Media Hardware
Banyak {i>keyboard<i} saat ini memiliki tombol untuk mengontrol fungsi dasar pemutaran media seperti sebagai putar/jeda, lagu sebelumnya dan lagu berikutnya. Headset juga memilikinya. Sampai sekarang, pengguna desktop tidak dapat menggunakan tombol media ini untuk mengontrol pemutaran audio dan video di Chrome. Hal ini berubah hari ini.
Jika pengguna menekan tombol jeda, elemen media aktif yang diputar di Chrome akan dijeda dan menerima status "dijeda" peristiwa media. Jika tombol putar ditekan, elemen media yang sebelumnya dijeda akan dilanjutkan dan menerima "putar" media peristiwa. Fitur ini akan berfungsi baik saat Chrome berada di latar depan maupun di latar belakang.
Di ChromeOS, aplikasi Android yang menggunakan fokus audio kini akan memberi tahu Chrome untuk menjeda dan lanjutkan audio untuk menciptakan pengalaman media yang lancar antar-situs di Chrome, Aplikasi Chrome dan Aplikasi Android. Fitur ini saat ini hanya didukung di ChromeOS perangkat yang menjalankan Android P.
Singkatnya, sebaiknya Anda selalu mendengarkan peristiwa media ini dan bertindak sebagaimana mestinya.
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
Tunggu, masih ada lagi! Dengan Media Session API yang kini tersedia di desktop
(sebelumnya hanya didukung di perangkat seluler), developer web dapat menangani media
peristiwa terkait, seperti perubahan trek yang dipicu oleh tombol media. Tujuan
peristiwa previoustrack
dan nexttrack
saat ini didukung.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
Tombol putar dan jeda ditangani secara otomatis oleh Chrome. Namun jika setelan default tidak berhasil, Anda masih dapat menetapkan beberapa pengendali tindakan untuk "putar" dan "jeda" untuk mencegah hal ini.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
Dukungan Hardware Media Keys tersedia di ChromeOS, macOS, dan Windows. Linux akan dibahas nanti.
Lihat dokumentasi developer kami yang sudah ada dan coba Media resmi Contoh sesi.
Pelacak Chromestatus | Bug Chromium
Media Terenkripsi: Pemeriksaan Kebijakan HDCP
Berkat HDCP Policy Check API, developer web kini dapat mengkueri apakah kebijakan tertentu, misalnya Persyaratan HDCP, dapat diterapkan sebelum meminta Lisensi Widevine, dan memuat media.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
API ini tersedia di semua platform. Namun, pemeriksaan kebijakan
yang sebenarnya mungkin
tidak tersedia di platform tertentu. Misalnya, promise pemeriksaan kebijakan HDCP
akan ditolak dengan NotSupportedError
di Android dan Android WebView.
Lihat dokumentasi developer kami sebelumnya dan coba gunakan fitur contoh untuk melihat semua versi HDCP yang didukung.
Niat Mengirimkan | Pelacak Chromestatus | Bug Chromium
Uji Coba Origin untuk Auto Picture-in-Picture untuk PWA terinstal
Beberapa halaman mungkin ingin masuk dan keluar dari Picture-in-Picture secara otomatis untuk elemen video; misalnya, aplikasi web konferensi video akan mendapat manfaat dari perilaku Picture-in-Picture otomatis ketika pengguna beralih antara aplikasi web dan aplikasi atau tab lainnya. Sayangnya, hal ini tidak mungkin dilakukan persyaratan gestur pengguna. Jadi inilah fitur Picture-in-Picture Otomatis.
Untuk mendukung peralihan tab dan aplikasi ini, atribut autopictureinpicture
baru
ditambahkan ke elemen <video>
.
<video autopictureinpicture></video>
Berikut kurang lebih cara kerjanya:
- Saat dokumen disembunyikan, elemen video dengan
autopictureinpicture
terakhir disetel secara otomatis masuk ke Picture-in-Picture, jika diizinkan. - Saat dokumen terlihat, elemen video dalam Picture-in-Picture akan meninggalkannya secara otomatis.
Selesai. Perhatikan bahwa fitur Picture-in-Picture Otomatis hanya berlaku untuk Progressive Web App yang telah diinstal pengguna di desktop.
Lihat spesifikasi untuk detail lebih lanjut dan coba menggunakan PWA resmi contoh.
Niat untuk Bereksperimen | Pelacak Chromestatus | Bug Chromium
Uji Coba Origin untuk Lewati Iklan di jendela Picture-in-Picture
Model iklan video biasanya terdiri dari iklan pre-roll. Isi penyedia layanan biasanya memberikan kemampuan untuk melewatkan iklan setelah beberapa detik. Sayangnya, karena jendela Picture-in-Picture tidak interaktif, pengguna menonton video di Picture-in-Picture tidak dapat melakukannya hari ini.
Dengan Media Session API yang kini tersedia di desktop (didukung di
hanya di perangkat seluler sebelumnya), tindakan sesi media skipad
baru dapat digunakan untuk menawarkan
di Picture-in-Picture.
Untuk menyediakan fitur ini, teruskan fungsi dengan skipad
saat memanggil
setActionHandler()
. Untuk menyembunyikannya, teruskan null
. Seperti yang dapat Anda baca
di bawah ini, adalah
cukup mudah.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
Cobalah "Lewati Iklan" resmi contoh dan beri tahu kami bagaimana fitur ini dapat bisa ditingkatkan.
Niat untuk Bereksperimen | Pelacak Chromestatus | Bug Chromium
Putar otomatis diberikan untuk PWA Desktop
Setelah Progressive Web App tersedia di semua platform desktop, kami memperluas aturan yang ada di perangkat seluler ke desktop: putar otomatis dengan suara kini diizinkan untuk PWA yang diinstal. Perhatikan bahwa ini hanya berlaku untuk halaman di cakupan manifes aplikasi web.