Update media di Chrome 73

François Beaufort

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 mengajukan kueri apakah kebijakan HDCP tertentu dapat diterapkan.
• Auto Picture-in-Picture di PWA desktop dan "Lewati Iklan" dalam Picture-in-Picture akan tersedia dalam uji coba origin.
• PWA desktop diizinkan untuk fitur putar otomatis dengan suara.

Dukungan Tombol Media Hardware

Banyak keyboard saat ini memiliki tombol untuk mengontrol fungsi pemutaran media dasar seperti putar/jeda, trek sebelumnya, dan lagu 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

Jika pengguna menekan tombol jeda, elemen media aktif yang diputar di Chrome akan dijeda dan menerima peristiwa media "dijeda". Jika tombol putar ditekan, elemen media yang sebelumnya dijeda akan dilanjutkan dan menerima peristiwa media "putar". Fitur ini berfungsi baik saat Chrome berada di latar depan maupun 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 antar-situs di Chrome, Aplikasi Chrome, dan Aplikasi Android. Saat ini, fitur ini hanya didukung di perangkat ChromeOS yang menjalankan Android P.

Singkatnya, sebaiknya selalu dengarkan peristiwa media ini dan bertindak sesuai dengan peristiwa tersebut.

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 trek 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 "putar" dan "jeda" untuk mencegahnya.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Dukungan Tombol Media Hardware tersedia di ChromeOS, macOS, dan Windows. Linux akan hadir nanti.

Catatan: Menetapkan beberapa metadata sesi media seperti judul, artis, nama album, dan karya seni dengan Media Session API tersedia, tetapi belum terhubung ke notifikasi desktop. Fitur ini akan tersedia di platform yang didukung nanti.

Lihat dokumentasi developer yang ada dan coba contoh Media Session resmi.

Pelacak Chromestatus | Bug Chromium

Media Terenkripsi: Pemeriksaan Kebijakan HDCP

Berkat HDCP Policy Check API, developer web kini dapat membuat kueri 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 sebelumnya dan coba contoh resmi untuk melihat semua versi HDCP yang didukung.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Uji Coba Origin untuk Auto Picture-in-Picture untuk PWA terinstal

Beberapa halaman mungkin ingin otomatis masuk dan keluar dari Picture-in-Picture untuk elemen video; misalnya, aplikasi web konferensi video akan mendapatkan manfaat dari beberapa perilaku Picture-in-Picture otomatis saat pengguna beralih bolak-balik antara aplikasi web dan aplikasi atau tab lainnya. Sayangnya, hal ini tidak memungkinkan dengan persyaratan gestur pengguna. Jadi, inilah Picture-in-Picture Otomatis.

Untuk mendukung peralihan tab dan aplikasi ini, atribut autopictureinpicture baru ditambahkan ke elemen <video>.

<video autopictureinpicture></video>

Berikut ini cara kerjanya:

• Saat dokumen disembunyikan, elemen video yang atribut autopictureinpicture-nya disetel baru-baru ini akan otomatis masuk ke Picture-in-Picture, jika diizinkan.
• Saat dokumen terlihat, elemen video dalam Picture-in-Picture akan otomatis keluar darinya.

Selesai. Perhatikan bahwa fitur Picture-in-Picture Otomatis hanya berlaku untuk Progressive Web App yang telah diinstal pengguna di desktop.

Lihat spesifikasi untuk mengetahui detail selengkapnya dan coba menggunakan contoh PWA resmi.

Catatan: Untuk mendapatkan masukan dari developer web, fitur Picture-in-Picture Otomatis tersedia sebagai [uji coba origin] di Chrome 73 untuk desktop (ChromeOS, Linux, Mac, dan Windows). Anda harus [meminta token], agar fitur tersebut otomatis diaktifkan untuk origin Anda selama jangka waktu terbatas. Dengan demikian, Anda tidak perlu mengaktifkan tanda "Fitur Platform Web".

Intent to Experiment | Chromestatus Tracker | Chromium Bug

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 saat 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

Untuk menyediakan fitur ini, teruskan fungsi dengan skipad saat memanggil setActionHandler(). Untuk menyembunyikannya, teruskan null. Seperti yang dapat Anda baca di bawah, cara 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.
}

Perhatian: Pengendali tindakan sesi media akan tetap ada. Sebaiknya selalu reset tombol tersebut saat pemutaran media dimulai dan berakhir untuk menghindari tombol "Lewati Iklan" yang muncul secara tidak terduga.

Coba contoh resmi "Lewati Iklan" dan beri tahu kami bagaimana fitur ini dapat ditingkatkan.

Catatan: Untuk mendapatkan masukan dari developer web, fitur Lewati Iklan di jendela Picture-in-Picture tersedia sebagai [uji coba origin] di Chrome 73 untuk desktop (ChromeOS, Linux, Mac, dan Windows). Anda harus [meminta token], sehingga fitur ini otomatis diaktifkan untuk origin Anda selama jangka waktu yang terbatas. Dengan demikian, Anda tidak perlu mengaktifkan tanda "Fitur Platform Web".

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 kami miliki di perangkat seluler ke desktop: putar otomatis dengan suara kini diizinkan untuk PWA terinstal. Perhatikan bahwa hal ini hanya berlaku untuk halaman dalam cakupan manifes aplikasi web.

Bug Chromium