Kebijakan putar otomatis di Chrome

Meningkatkan kualitas pengalaman pengguna, meminimalkan insentif untuk menginstal pemblokir iklan, dan mengurangi konsumsi data

Kebijakan putar otomatis Chrome berubah pada April 2018 dan kami ingin memberitahukan alasan dan pengaruhnya terhadap pemutaran video dengan suara. Peringatan {i>spoiler<i}: pengguna akan menyukainya!

Perilaku baru

Seperti yang mungkin sudah Anda perhatikan, browser web beralih ke kebijakan putar otomatis yang lebih ketat untuk meningkatkan kualitas pengalaman pengguna, meminimalkan insentif untuk menginstal pemblokir iklan, dan mengurangi konsumsi data di jaringan yang mahal dan/atau terbatas. Perubahan ini dimaksudkan untuk memberikan kontrol pemutaran yang lebih besar kepada pengguna dan untuk menguntungkan penayang dengan kasus penggunaan yang sah.

Kebijakan putar otomatis Chrome sederhana:

• Putar otomatis tanpa suara selalu diizinkan.
• Putar otomatis dengan suara diizinkan jika:
  • Pengguna telah berinteraksi dengan domain (klik, ketuk, dll.).
  • Di desktop, batas Media Engagement Index pengguna telah terlampaui, yang berarti pengguna sebelumnya telah memutar video dengan suara.
  • Pengguna telah menambahkan situs ke layar utama di perangkat seluler atau menginstal PWA di desktop.
• Frame atas dapat mendelegasikan izin putar otomatis ke iframe-nya agar memungkinkan putar otomatis dengan suara.

Indeks Engagement Media

Media Engagement Index (MEI) mengukur kecenderungan pengguna untuk menggunakan media di situs. Pendekatan Chrome adalah rasio kunjungan terhadap peristiwa pemutaran media yang signifikan per asal:

• Konsumsi media (audio/video) harus lebih dari tujuh detik.
• Audio harus ada dan dibunyikan.
• Tab dengan video aktif.
• Ukuran video (dalam px) harus lebih besar dari 200x140.

Setelah itu, Chrome menghitung skor engagement media, yang merupakan nilai tertinggi di situs tempat media diputar secara rutin. Jika suhunya cukup tinggi, media diizinkan untuk diputar otomatis di desktop saja.

MEI pengguna tersedia di halaman internal about://media-engagement.

Tombol developer

Sebagai developer, sebaiknya ubah perilaku kebijakan putar otomatis Chrome secara lokal untuk menguji situs Anda pada berbagai tingkat engagement pengguna.

• Anda dapat menonaktifkan kebijakan putar otomatis sepenuhnya menggunakan tanda command line: chrome.exe --autoplay-policy=no-user-gesture-required. Dengan demikian, Anda dapat menguji situs seolah-olah pengguna sangat tertarik dengan situs Anda dan fitur putar otomatis pemutaran akan selalu diizinkan.

• Anda juga dapat memutuskan untuk memastikan putar otomatis tidak pernah diizinkan dengan menonaktifkan MEI dan apakah situs dengan MEI keseluruhan tertinggi mendapatkan putar otomatis secara default untuk pengguna baru. Lakukan ini dengan flag: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Delegasi Iframe

Kebijakan izin memungkinkan developer mengaktifkan dan menonaktifkan fitur dan API browser secara selektif. Setelah menerima izin putar otomatis, origin dapat mendelegasikan izin tersebut ke iframe lintas origin dengan kebijakan izin untuk putar otomatis. Perhatikan bahwa putar otomatis diizinkan secara default pada iframe asal yang sama.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Jika kebijakan izin untuk putar otomatis dinonaktifkan, panggilan ke play() tanpa gestur pengguna akan menolak promise dengan NotAllowedError DOMException. Dan atribut putar otomatis juga akan diabaikan.

Contoh

Contoh 1: Setiap kali pengguna mengunjungi VideoSubscriptionSite.com di laptop, mereka menonton acara TV atau film. Karena skor engagement medianya tinggi, fitur putar otomatis diizinkan.

Contoh 2: GlobalNewsSite.com memiliki konten teks dan video. Sebagian besar pengguna membuka situs untuk melihat konten teks dan menonton video hanya sesekali. Skor engagement media pengguna rendah, sehingga putar otomatis tidak akan diizinkan jika pengguna membuka langsung dari halaman atau penelusuran media sosial.

Contoh 3: LocalNewsSite.com memiliki konten teks dan video. Kebanyakan orang masuk situs melalui halaman beranda, lalu mengklik artikel berita. Putar otomatis di halaman artikel berita akan diizinkan karena interaksi pengguna dengan domain. Namun, Anda harus berhati-hati untuk memastikan pengguna tidak terkejut dengan pemutaran otomatis konten.

Contoh 4: MyMovieReviewBlog.com menyematkan iframe dengan cuplikan film untuk disertakan dengan ulasan. Pengguna berinteraksi dengan domain untuk membuka blog, sehingga putar otomatis diizinkan. Namun, blog harus secara eksplisit mendelegasikan hak istimewa tersebut ke iframe agar konten dapat diputar otomatis.

Kebijakan Chrome Enterprise

Anda dapat mengubah perilaku putar otomatis dengan kebijakan Chrome Enterprise untuk kasus penggunaan seperti kios atau sistem yang tidak diawasi. Lihat halaman bantuan Daftar Kebijakan untuk mempelajari cara menetapkan kebijakan perusahaan terkait putar otomatis:

• Kebijakan AutoplayAllowed mengontrol apakah putar otomatis diizinkan atau tidak.
• Kebijakan AutoplayAllowlist memungkinkan Anda menentukan daftar pola URL yang diizinkan yang akan selalu mengaktifkan putar otomatis.

Praktik terbaik untuk developer web

Elemen Audio/Video

Satu hal yang perlu diingat: Jangan berasumsi bahwa video akan diputar, dan jangan tampilkan tombol jeda saat video tidak benar-benar diputar. Sangat penting sehingga saya akan menuliskannya sekali lagi di bawah ini untuk mereka yang hanya membaca sekilas postingan tersebut.

Anda harus selalu melihat Promise yang ditampilkan oleh fungsi play untuk mengetahui apakah itu ditolak:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Salah satu cara yang bagus untuk berinteraksi dengan pengguna adalah menggunakan putar otomatis yang dibisukan dan membiarkan mereka memilih untuk membunyikan audio. (Lihat contoh di bawah.) Beberapa situs web sudah melakukannya secara efektif, termasuk Facebook, Instagram, Twitter, dan YouTube.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

Peristiwa yang memicu aktivasi pengguna masih harus ditentukan secara konsisten di seluruh browser. Sebaiknya tetap gunakan "click" untuk sementara waktu. Lihat GitHub issue whatwg/html#3849.

Audio Web

Web Audio API telah dicakup oleh fitur putar otomatis sejak Chrome 71. Ada beberapa hal yang perlu diketahui tentangnya. Pertama, sebaiknya tunggu interaksi pengguna sebelum memulai pemutaran audio, sehingga pengguna mengetahui sesuatu yang terjadi. Misalnya, pikirkan tentang tombol "{i>play<i}" atau tombol "{i>on/off<i}". Anda juga dapat menambahkan tombol "bunyikan" bergantung pada alur aplikasi.

Jika membuat AudioContext saat halaman dimuat, Anda harus memanggil resume() beberapa saat setelah pengguna berinteraksi dengan halaman (misalnya, setelah pengguna mengklik tombol). Atau, AudioContext akan dilanjutkan setelah gestur pengguna jika start() dipanggil pada node yang terpasang.

// Existing code unchanged.
window. {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

Anda juga dapat membuat AudioContext hanya saat pengguna berinteraksi dengan halaman.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

Untuk mendeteksi apakah browser memerlukan interaksi pengguna untuk memutar audio, periksa AudioContext.state setelah Anda membuatnya. Jika pemutaran diizinkan, pemutaran akan segera beralih ke running. Jika tidak, nilainya adalah suspended. Jika memproses peristiwa statechange, Anda dapat mendeteksi perubahan secara asinkron.

Untuk melihat contohnya, lihat Pull Request kecil yang memperbaiki pemutaran Audio Web untuk aturan kebijakan putar otomatis ini untuk https://airhorner.com.