Putar Otomatis Tanpa Suara di Perangkat Seluler - Tak perlu lagi menggunakan trik kanvas dan GIF animasi.

Putar otomatis tanpa suara untuk video didukung oleh Chrome untuk Android mulai versi 53. Pemutaran akan dimulai secara otomatis untuk elemen video setelah terlihat jika autoplay dan muted telah disetel, dan pemutaran video yang dibisukan dapat dimulai secara pragmatis dengan play(). Sebelumnya, pemutaran di perangkat seluler harus dimulai oleh gestur pengguna, terlepas dari status dibisukan.

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

Anda dapat melihat cara kerjanya dengan membuka contoh ini. Pemutaran video muted akan dimulai otomatis di Chrome 53 atau yang lebih baru.

Screenshot pemutar video.

Selain itu, pemutaran yang dibisukan sekarang dapat dimulai menggunakan metode play(). Sebelumnya, play() hanya akan memulai pemutaran jika berasal dari gestur pengguna seperti klik tombol. Bandingkan dua demo berikut di Android — cobalah di Chrome 53, lalu di versi lama:

Sebaiknya gunakan atribut autoplay jika memungkinkan, dan metode play() hanya jika perlu.

Anda dapat membunyikan audio video secara terprogram sebagai respons terhadap gestur pengguna seperti click, tetapi jika Anda mencoba membunyikan audio video secara terprogram tanpa gestur pengguna, pemutaran akan dijeda.

Perubahan muted autoplay juga akan memungkinkan penggunaan play() dengan elemen video yang tidak dibuat di DOM, misalnya untuk mendorong pemutaran WebGL.

Metode play() juga menampilkan promise, yang dapat digunakan untuk memeriksa apakah pemutaran terprogram yang dibisukan diaktifkan. Anda dapat menemukan contohnya di simpl.info/video/scripted.

Mengapa dilakukan perubahan?

Putar Otomatis dinonaktifkan pada Chrome versi sebelumnya di Android karena dapat mengganggu, menggunakan data, dan banyak pengguna tidak menyukainya.

Menonaktifkan putar otomatis memiliki efek yang tidak diinginkan mendorong developer ke alternatif seperti GIF animasi, serta peretasan <canvas> dan <img>. Teknik ini jauh lebih buruk daripada video yang dioptimalkan dalam hal konsumsi daya, performa, persyaratan bandwidth, biaya data, dan penggunaan memori. Video dapat memberikan kualitas yang lebih tinggi daripada GIF animasi, dengan kompresi yang jauh lebih baik: rata-rata sekitar 10 kali, dan paling banyak hingga 100 kali. Dekode video dalam JavaScript dapat dilakukan, tetapi hal ini sangat menguras daya baterai.

Bandingkan contoh berikut — yang pertama adalah video dan yang kedua adalah animasi GIF:

Video klip sedang diputar.

Mereka terlihat sangat mirip, tetapi video berukuran kurang dari 200 KB dan ukuran GIF animasi berukuran lebih dari 900 KB.

Chrome dan vendor browser lainnya sangat berhati-hati dengan bandwidth pengguna. Bagi banyak pengguna dalam banyak konteks, biaya data yang tinggi sering kali menjadi penghalang yang lebih besar daripada konektivitas yang buruk. Mengingat lazimnya solusi, putar otomatis tanpa suara bukanlah sesuatu yang dapat diblokir, jadi menawarkan API dan default yang baik adalah hal terbaik yang dapat dilakukan platform.

Web semakin berfokus pada media. Desainer dan developer terus menemukan cara baru dan tak terduga untuk menggunakan video, dan mereka menginginkan perilaku yang konsisten di seluruh platform, misalnya saat menggunakan video latar belakang sebagai elemen desain. Putar otomatis tanpa suara mengaktifkan fungsi seperti ini di perangkat seluler dan desktop.

Poin-poin penting

  • Dari sudut pandang aksesibilitas, putar otomatis bisa sangat bermasalah. Chrome 53 dan yang lebih baru di Android menyediakan setelan untuk menonaktifkan putar otomatis sepenuhnya: dari setelan Media, pilih Putar Otomatis.
  • Perubahan ini tidak memengaruhi elemen audio: putar otomatis masih dinonaktifkan di Chrome pada Android, karena putar otomatis tanpa suara tidak cocok untuk audio.
  • Tidak ada putar otomatis jika mode Penghemat Data diaktifkan. Jika mode Penghemat Data diaktifkan, putar otomatis akan dinonaktifkan di setelan Media.
  • Putar otomatis tanpa suara akan berfungsi untuk elemen video yang terlihat dalam dokumen, iframe, atau yang lainnya.
  • Perlu diingat bahwa untuk memanfaatkan perilaku baru ini, Anda harus menambahkan muted dan autoplay: bandingkan simpl.info/video dengan simpl.info/video/muted.

Dukungan

  • Putar otomatis tanpa suara didukung oleh Safari di iOS 10 dan yang lebih baru.
  • Putar otomatis, baik dibisukan atau tidak, sudah didukung di Android oleh Firefox dan UC Browser: fitur ini tidak memblokir jenis putar otomatis apa pun.

Cari tahu selengkapnya