Update media di Chrome 73

François Beaufort
François Beaufort
GitHub

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

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.

Tombol media keyboard
Tombol media keyboard

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.

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

Bug Chromium