Dalam artikel ini, saya akan membahas fitur media baru Chrome 73 yang mencakup:
- Tombol media hardware kini didukung untuk mengontrol pemutaran media di desktop.
- Developer web dapat melakukan kueri apakah kebijakan HDCP tertentu dapat diterapkan.
- Auto Picture-in-Picture di PWA desktop dan "Lewati Iklan" dalam Picture-in-Picture akan hadir dalam uji coba origin.
- PWA desktop diberi izin putar otomatis dengan suara.
Dukungan Kunci Media Hardware
Banyak keyboard saat ini yang memiliki tombol untuk mengontrol fungsi dasar pemutaran media seperti putar/jeda, lagu sebelumnya dan berikutnya. Headset juga memilikinya. Hingga saat ini, 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 peristiwa media yang "dijeda". Jika tombol putar ditekan, elemen media yang sebelumnya dijeda akan dilanjutkan dan menerima peristiwa media "putar". Fitur ini akan berfungsi baik di latar depan maupun di latar belakang.
Di ChromeOS, aplikasi Android yang menggunakan fokus audio kini akan memberi tahu Chrome untuk menjeda dan melanjutkan audio guna menciptakan pengalaman media yang lancar antara situs di Chrome, Aplikasi Chrome, dan Aplikasi Android. Saat ini, fitur ini hanya didukung di perangkat ChromeOS yang menjalankan Android P.
Singkatnya, merupakan praktik yang baik untuk selalu memproses peristiwa media ini dan bertindak sesuai.
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 peristiwa
terkait media seperti perubahan jalur yang dipicu oleh tombol media. 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 perilaku default tidak berhasil, Anda masih dapat menetapkan beberapa pengendali tindakan untuk "play" dan "pause" untuk mencegahnya.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
Dukungan Kunci Media Hardware tersedia di ChromeOS, macOS, dan Windows. Linux akan menyusul.
Lihat dokumentasi developer kami yang sudah ada dan coba contoh Sesi Media resmi.
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 contoh resmi untuk melihat semua versi HDCP yang didukung.
Niat untuk Dikirimkan | Pelacak Status Chrome | Bug Chromium
Uji Coba Origin untuk Picture-in-Picture Otomatis bagi PWA yang diinstal
Beberapa halaman mungkin ingin masuk dan keluar dari Picture-in-Picture secara otomatis untuk elemen video. Misalnya, aplikasi web konferensi video akan mendapatkan manfaat dari beberapa perilaku Picture-in-Picture otomatis saat pengguna beralih antara aplikasi web dan aplikasi atau tab lainnya. Sayangnya, hal ini tidak dapat dilakukan dengan persyaratan gestur pengguna. Inilah fitur Auto Picture-in-Picture!
Untuk mendukung peralihan tab dan aplikasi ini, atribut autopictureinpicture
baru
ditambahkan ke elemen <video>
.
<video autopictureinpicture></video>
Berikut ini kira-kira cara kerjanya:
- Saat dokumen disembunyikan, elemen video yang atribut
autopictureinpicture
-nya disetel baru-baru ini akan otomatis memasuki Picture-in-Picture, jika diizinkan. - Saat dokumen terlihat, elemen video di Picture-in-Picture akan otomatis keluar dari dokumen.
Selesai. Perhatikan bahwa fitur Auto Picture-in-Picture hanya berlaku untuk Progressive Web App yang telah diinstal pengguna di desktop.
Lihat spec untuk mengetahui detail lebih lanjut dan coba menggunakan contoh PWA resmi.
Niat untuk Melakukan Eksperimen | Pelacak Status Chrome | Bug Chromium
Uji Coba Origin untuk Lewati Iklan di jendela Picture-in-Picture
Model iklan video biasanya terdiri dari iklan pre-roll. Penyedia konten sering kali memberikan kemampuan untuk melewati iklan setelah beberapa detik. Sayangnya, karena jendela Picture-in-Picture tidak interaktif, pengguna yang menonton video dalam Picture-in-Picture tidak dapat melakukannya hari ini.
Dengan Media Session API yang kini tersedia di desktop (sebelumnya hanya
didukung di perangkat seluler), tindakan sesi media skipad
baru dapat digunakan untuk menawarkan opsi
ini 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, 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.
}
Coba contoh "Lewati Iklan" resmi dan beri tahu kami cara meningkatkan fitur ini.
Niat untuk Melakukan Eksperimen | Pelacak Status Chrome | Bug Chromium
Putar otomatis diberikan untuk PWA Desktop
Karena Progressive Web App sekarang tersedia di semua platform desktop, kami memperluas aturan yang sebelumnya ada di perangkat seluler ke desktop: putar otomatis dengan suara kini diizinkan untuk PWA yang diinstal. Perhatikan bahwa ini hanya berlaku untuk halaman dalam cakupan manifes aplikasi web.