Halaman ini diterjemahkan oleh Cloud Translation API.

Kebijakan putar otomatis di Chrome

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

François Beaufort

Kebijakan putar otomatis Chrome berubah pada April 2018 dan kami akan menyampaikannya Anda mengapa dan bagaimana hal ini memengaruhi pemutaran video dengan suara. {i>Spoiler<i} peringatan: pengguna akan menyukainya!

Liam Neeson: Aku akan menemukanmu dan menghentikanmu. — Meme internet yang diberi tag "autoplay" yang ditemukan di Imgflip dan Imgur.

Sean Bean: Kita tidak bisa begitu saja memutar video secara otomatis. — Meme internet yang diberi tag "autoplay" yang ditemukan di Imgflip dan Imgur.

Perilaku baru

Seperti yang mungkin telah Anda perhatikan, browser web beralih ke kebijakan pemutaran otomatis yang lebih ketat untuk meningkatkan 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 yang dibisukan selalu diizinkan.
Putar otomatis dengan suara diizinkan jika:
- Pengguna telah berinteraksi dengan domain (klik, ketuk, dll.).
- Di desktop, nilai minimum 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 untuk izinkan putar otomatis dengan suara.

Indeks Engagement Media

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

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

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

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

Screenshot halaman internal about://media-engagement. — Screenshot halaman internal `about://media-engagement` di Chrome.

Tombol developer

Sebagai developer, Anda mungkin ingin mengubah perilaku kebijakan putar otomatis Chrome secara lokal untuk menguji situs Anda dengan berbagai tingkat interaksi pengguna.

Anda dapat menonaktifkan kebijakan putar otomatis sepenuhnya menggunakan command line flag: chrome.exe --autoplay-policy=no-user-gesture-required. Hal ini memungkinkan Anda untuk menguji situs web Anda seolah-olah pengguna sangat terlibat dengan situs dan pemutaran otomatis akan selalu diizinkan.
Anda juga dapat memutuskan untuk memastikan pemutaran otomatis tidak pernah diizinkan dengan menonaktifkan MEI dan apakah situs dengan MEI keseluruhan tertinggi mendapatkan pemutaran 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 secara selektif fitur browser dan API. Setelah origin menerima fitur putar otomatis izin tersebut, ia dapat mendelegasikan izin tersebut ke iframe lintas origin dengan kebijakan izin untuk putar otomatis. Perhatikan bahwa pemutaran otomatis diizinkan secara default di iframe dengan origin 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 DOMException NotAllowedError. Selain itu, atribut putar otomatis juga akan diabaikan.

Peringatan: Artikel lama salah merekomendasikan penggunaan atribut gesture=media yang tidak didukung.

Contoh

Contoh 1: Setiap kali pengguna mengunjungi VideoSubscriptionSite.com pada laptop mereka menonton acara TV atau film. Karena skor engagement media mereka tinggi, 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 pemutaran otomatis tidak akan diizinkan jika pengguna membuka langsung dari halaman media sosial atau penelusuran.

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

Contoh 4: MyMovieReviewBlog.com menyematkan iframe dengan cuplikan film untuk disertakan dengan ulasan. Pengguna berinteraksi dengan domain untuk sampai ke blog, jadi putar otomatis diizinkan. Namun, blog perlu secara eksplisit mendelegasikan hak istimewa 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 tanpa pengawasan. Lihat Kebijakan Buat halaman bantuan Daftar untuk mempelajari cara menyetel perusahaan terkait putar otomatis kebijakan:

Kebijakan AutoplayAllowed mengontrol apakah {i>autoplay <i}diizinkan atau tidak.
Dengan kebijakan AutoplayAllowlist, Anda dapat menentukan daftar pola URL yang diizinkan dengan putar otomatis yang akan selalu diaktifkan.

Praktik terbaik untuk developer web

Elemen Audio/Video

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

Anda harus selalu melihat Promise yang ditampilkan oleh fungsi play untuk mengetahui apakah permintaan tersebut 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 menarik interaksi pengguna adalah menggunakan putar otomatis yang dibisukan dan mengizinkan mereka memilih untuk membunyikannya. (Lihat contoh di bawah.) Beberapa situs web sudah melakukan ini secara efektif, termasuk Facebook, Instagram, Twitter, dan YouTube.

<video id="video" muted playsinline 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 Masalah GitHub 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. Bayangkan "permainan" atau "aktif/nonaktif" misalnya. Anda juga dapat menambahkan "bunyikan" bergantung pada alur aplikasi.

Catatan: Jika AudioContext dibuat sebelum dokumen menerima gestur pengguna, akan dibuat dalam status "suspended" status, dan Anda harus memanggil resume() setelah gestur pengguna.

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

// Existing code unchanged.
window.onload = function() {
  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 kami.

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, seharusnya langsung beralih ke running. Jika tidak, kolom akan ditetapkan ke suspended. Jika Anda mendengarkan ke peristiwa statechange, Anda dapat mendeteksi perubahan secara asinkron.

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