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

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

<video playsinline 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 dimulai secara otomatis di Chrome 53 atau yang lebih baru.

Screenshot pemutar video.

Selain itu, pemutaran yang disenyapkan kini 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 — coba di Chrome 53, lalu di versi yang lebih lama:

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

Video dapat diaktifkan suaranya secara terprogram sebagai respons terhadap gestur pengguna seperti click, tetapi jika Anda mencoba mengaktifkan suara 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 disetel ke senyap diaktifkan. Ada contohnya di simpl.info/video/scripted.

Mengapa perubahan ini dilakukan?

Putar otomatis dinonaktifkan di versi Chrome sebelumnya di Android karena dapat mengganggu, menghabiskan banyak data, dan tidak disukai banyak pengguna.

Menonaktifkan putar otomatis secara tidak sengaja mendorong developer untuk menggunakan alternatif seperti GIF animasi, serta hack <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 100 kali. Dekode video di JavaScript dapat dilakukan, tetapi akan menguras daya baterai secara signifikan.

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

Video klip diputar.

Tampilannya cukup mirip, tetapi ukuran video kurang dari 200 KB dan GIF animasi lebih dari 900 KB.

Chrome dan vendor browser lainnya sangat berhati-hati terhadap bandwidth pengguna. Bagi banyak pengguna dalam banyak konteks, biaya data yang tinggi sering kali menjadi penghalang yang lebih besar untuk mengakses internet daripada konektivitas yang buruk. Mengingat banyaknya solusi yang tersedia, pemutaran otomatis dengan suara nonaktif tidak dapat diblokir, sehingga menawarkan API dan default yang baik adalah hal terbaik yang dapat dilakukan platform.

Web semakin berpusat 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 yang diredam memungkinkan fungsi seperti ini di perangkat seluler dan desktop.

Poin-poin penting

  • Dari sudut pandang aksesibilitas, putar otomatis dapat 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: pemutaran otomatis masih dinonaktifkan di Chrome di Android, karena pemutaran otomatis yang disetel ke senyap tidak terlalu berguna untuk audio.
  • Tidak ada putar otomatis jika mode Penghemat Data diaktifkan. Jika mode Penghemat Data diaktifkan, putar otomatis dinonaktifkan di setelan Media.
  • Putar otomatis yang disenyapkan akan berfungsi untuk elemen video yang terlihat di dokumen, iframe, atau lainnya yang terlihat.
  • Perlu diingat bahwa untuk memanfaatkan perilaku baru, Anda harus menambahkan muted dan autoplay: bandingkan simpl.info/video dengan simpl.info/video/muted.

Dukungan

  • Putar otomatis yang diredam 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: keduanya tidak memblokir jenis putar otomatis apa pun.

Cari tahu lebih lanjut