Update media di Chrome 73

François Beaufort
François Beaufort

Dalam artikel ini, saya akan membahas fitur media baru Chrome 73 yang mencakup:

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.

Tombol media keyboard
Tombol media keyboard

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.

Tombol Lewati Iklan di jendela Picture-in-Picture
Tombol "Lewati Iklan" di jendela 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.

Bug Chromium