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

Pemutaran otomatis dengan suara bisu untuk video didukung oleh Chrome untuk Android mulai versi 53. Pemutaran akan dimulai secara otomatis untuk elemen video setelah video muncul jika autoplay dan muted 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 bisu.

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

Screenshot pemutar video.

Selain itu, pemutaran yang dibisukan 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.

Anda dapat membunyikan video secara terprogram sebagai respons terhadap gestur pengguna seperti click, tetapi jika Anda mencoba membunyikan 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 ada perubahan?

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

Menonaktifkan pemutaran otomatis memiliki efek yang tidak diinginkan, yaitu 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: sekitar 10 kali rata-rata, dan hingga 100 kali pada kondisi terbaik. Dekode video dalam JavaScript dapat dilakukan, tetapi menghabiskan daya baterai secara signifikan.

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

Video klip sedang diputar.

Keduanya terlihat cukup mirip, tetapi ukuran video kurang dari 200 KB dan GIF animasi 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 hambatan yang lebih besar untuk akses dibandingkan konektivitas yang buruk. Mengingat banyaknya solusi yang tersedia, pemutaran otomatis dengan suara bisu bukanlah sesuatu yang dapat diblokir. Jadi, menawarkan API dan setelan 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 dalam menggunakan video — dan mereka menginginkan perilaku yang konsisten di seluruh platform, misalnya saat menggunakan video latar belakang sebagai elemen desain. Pemutaran otomatis dengan suara bisu memungkinkan fungsi seperti ini di perangkat seluler dan desktop.

Hal-hal 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 untuk Android, karena putar otomatis yang dibisukan tidak cocok untuk audio.
  • Tidak ada putar otomatis jika Mode hemat 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 di dokumen yang terlihat, iframe, atau lainnya.
  • Ingat bahwa untuk memanfaatkan perilaku baru, Anda harus menambahkan muted serta autoplay: bandingkan simpl.info/video dengan simpl.info/video/muted.

Dukungan

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

Cari tahu selengkapnya