Pengalaman pengguna yang lebih baik, insentif yang diminimalkan untuk menginstal pemblokir iklan, dan pengurangan penggunaan data
Kebijakan putar otomatis Chrome berubah pada April 2018 dan kami akan menjelaskan alasan serta pengaruhnya terhadap pemutaran video dengan suara pada bulan April 2018. Peringatan spoiler: pengguna akan menyukainya!
Perilaku baru
Seperti yang mungkin telah Anda perhatikan, browser web beralih ke kebijakan putar otomatis yang lebih ketat untuk meningkatkan pengalaman pengguna, meminimalkan insentif untuk menginstal pemblokir iklan, dan mengurangi konsumsi data pada jaringan yang mahal dan/atau terbatas. Perubahan ini dimaksudkan untuk memberikan kontrol pemutaran yang lebih besar kepada pengguna dan menguntungkan penayang dengan kasus penggunaan yang sah.
Kebijakan putar otomatis Chrome cukup sederhana:
- Putar otomatis tanpa suara selalu diizinkan.
- Putar otomatis dengan suara diizinkan jika:
- Pengguna telah berinteraksi dengan domain (klik, ketuk, dll.).
- Di desktop, batas Indeks Engagement Media 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 teratas dapat mendelegasikan izin putar otomatis ke iframe-nya untuk memungkinkan putar otomatis dengan suara.
Indeks Engagement Media
Indeks Engagement Media (MEI) mengukur kecenderungan individu untuk mengonsumsi media di situs. Pendekatan Chrome adalah rasio kunjungan terhadap peristiwa pemutaran media yang signifikan per origin:
- 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.
Dari sana, Chrome menghitung skor engagement media, yang tertinggi di situs tempat media diputar secara rutin. Ketika cukup tinggi, media hanya diizinkan untuk diputar otomatis di desktop.
MEI pengguna tersedia di halaman internal about://media-engagement
.
Pengalihan developer
Sebagai developer, Anda mungkin ingin mengubah 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 begitu, Anda dapat menguji situs seolah-olah pengguna sangat berinteraksi dengan situs Anda dan pemutaran otomatis akan selalu diizinkan.Anda juga dapat memutuskan untuk memastikan putar otomatis tidak diizinkan dengan menonaktifkan MEI, dan apakah situs dengan MEI keseluruhan tertinggi akan mendapatkan putar otomatis secara default untuk pengguna baru. Lakukan ini dengan tanda:
chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies
.
Delegasi iframe
Kebijakan izin memungkinkan developer mengaktifkan dan menonaktifkan fitur browser dan API secara selektif. Setelah menerima izin putar otomatis, origin dapat mendelegasikan izin tersebut ke iframe lintas origin dengan kebijakan izin untuk autoplay. Perlu diketahui bahwa putar otomatis diizinkan secara default pada iframe 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
. 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 media mereka tinggi, putar otomatis diizinkan.
Contoh 2: GlobalNewsSite.com
memiliki konten teks dan video.
Sebagian besar pengguna mengunjungi situs tersebut untuk melihat konten teks dan hanya sesekali menonton video.
Skor engagement media pengguna rendah, sehingga putar otomatis tidak akan diizinkan jika pengguna membuka langsung dari halaman media sosial atau penelusuran.
Contoh 3: LocalNewsSite.com
memiliki konten teks dan video.
Kebanyakan orang masuk ke 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 konten yang diputar otomatis.
Contoh 4: MyMovieReviewBlog.com
menyematkan iframe berisi cuplikan film untuk ditinjau. Pengguna berinteraksi dengan domain untuk mengakses 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 perusahaan Chrome untuk kasus penggunaan seperti kios atau sistem tanpa pengawasan. 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 pola URL yang diizinkan dengan putar otomatis akan selalu diaktifkan.
Praktik terbaik untuk developer web
Elemen Audio/Video
Satu hal yang perlu diingat: Jangan pernah berasumsi bahwa video akan diputar, dan jangan tampilkan tombol jeda saat video tidak benar-benar diputar. Saya akan menulisnya sekali lagi di bawah ini untuk mereka yang hanya membacanya sekilas.
Anda harus selalu melihat Promise yang ditampilkan oleh fungsi play untuk mengetahui apakah fungsi 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 keren untuk berinteraksi dengan pengguna adalah dengan menggunakan putar otomatis tanpa suara dan membiarkan mereka memilih untuk membunyikan audio. (Lihat contoh di bawah.) Beberapa situs web sudah melakukan ini 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 akan 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 ditangani oleh fitur putar otomatis sejak Chrome 71. Ada beberapa hal yang perlu diketahui tentang hal ini. Pertama, sebaiknya tunggu interaksi pengguna sebelum memulai pemutaran audio sehingga pengguna mengetahui sesuatu yang sedang terjadi. Anggap saja tombol "putar" atau tombol "aktif/nonaktif" sebagai contohnya. Anda juga dapat menambahkan tombol "bunyikan" bergantung pada alur aplikasi.
Jika membuat AudioContext
saat halaman dimuat, Anda harus memanggil resume()
pada beberapa waktu 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.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
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, video akan
segera beralih ke running
. Jika tidak, suspended
. Jika memproses
peristiwa statechange
, Anda dapat mendeteksi perubahan secara asinkron.
Untuk melihat contohnya, lihat Permintaan Tarik kecil yang memperbaiki pemutaran Audio Web untuk aturan kebijakan putar otomatis ini bagi https://airhorner.com.