Pemutar tanpa tombol hanyalah kotak diam. Sebaliknya, video yang menyala sendiri begitu halaman dibuka bisa mengusir pengunjung. Di antara dua kutub itu, HTML memberi kita enam atribut untuk mengatur siapa yang memegang kendali pemutaran dan seberapa banyak data yang dipakai sebelum pengunjung menyentuh apa pun.

Chapter ini membahas keenam atribut tersebut, arti tiga nilai preload, serta dua kebijakan yang perlu kita ikuti supaya media berperilaku sopan terhadap pengunjung.

Enam Atribut Playback #

Semua atribut ini boolean kecuali preload, dan semuanya ditaruh pada tag pembuka elemen media:

AtributNilaiDampak
controlsbooleanmenampilkan antarmuka bawaan browser
autoplaybooleanmulai memutar segera setelah halaman termuat
mutedbooleanmematikan suara
loopbooleanmengulang pemutaran dari awal setelah selesai
preloadnone, metadata, autoseberapa banyak data diunduh sebelum diputar
playsinlinebooleanvideo diputar di dalam halaman, tidak dipaksa layar penuh

Atribut preload paling sering disalahpahami karena punya tiga nilai. none berarti browser tidak mengunduh apa pun sampai tombol putar ditekan — paling hemat kuota. metadata berarti browser hanya mengambil durasi dan ukuran media, cukup untuk menampilkan durasi episode di pemutar. auto berarti browser boleh mengunduh seluruh berkas di latar — jeda saat memutar minim, tetapi kuota terpakai besar meski pengunjung tidak jadi menonton.

Atribut playsinline khusus video di peranti mobile. Safari di iOS memang membuka video layar penuh begitu diputar; dengan playsinline, video tetap berada di tempatnya di dalam halaman. Pola ini wajib untuk video latar pendek.

Berikut kombinasi keduanya sekaligus — video latar kedai kopi dan pemutar podcast:

html 
<video src="video/latar-keran-kopi.mp4" autoplay muted loop playsinline></video>

<audio src="audio/kopi-pagi-episode-12.mp3" controls preload="metadata"></audio>

Hasil Render:

Pada demo, video latar dan podcast diganti media contoh daring (CC0, dari MDN) agar perilakunya langsung terlihat: video berputar otomatis tanpa suara dan tanpa bilah kendali, sementara pemutar audio tampil dengan durasi yang sudah terbaca. Demo membutuhkan koneksi internet.

Mari kita telaah kode di atas:

  1. Baris 1 (<video ...>): video latar; autoplay diterima browser karena muted menyertainya.
  2. loop: pemutaran kembali ke awal begitu selesai — aliran kopi tampak tanpa henti.
  3. playsinline: video tetap di dalam halaman di iOS, tidak menyala layar penuh.
  4. Baris 3 (<audio ...>): pemutar podcast dengan controls — pengunjung yang memutuskan kapan mendengarkan.
  5. preload="metadata": hanya durasi yang diunduh lebih dulu; berkas episode tidak dipanggil sampai tombol putar ditekan.

Ringkasan #

  • controls menampilkan antarmuka; tanpa atribut ini, pemutar tidak punya tombol apa pun.
  • autoplay hanya dijamin berjalan bersama muted; autoplay bersuara diblokir browser modern.
  • loop mengulang media; playsinline menjaga video tetap di dalam halaman di peranti mobile.
  • preload mengatur unduhan awal: none paling hemat, metadata menampilkan durasi, auto memanggil seluruh berkas.

Begitu pemutar siap, giliran tampilannya dirapikan. Chapter berikutnya membahas poster, gambar sampul yang menyambut pengunjung sebelum video diputar.