Sebelum pengunjung menekan putar, satu-satunya kesan yang kita berikan hanyalah bidang kosong. Tanpa pengaturan tambahan, area video menampilkan kekosongan — kadang putih, kadang gelap, bergantung browser. Frame pertama video baru tampil setelah sebagian data termuat, dan gambar itu sering kali tidak mewakili isi video. Elemen video punya satu atribut untuk mengatur kesan pertama: poster.

Chapter ini membahas cara kerja gambar poster, ukuran yang tepat, dan batas perannya — apa yang poster ubah dan apa yang tidak.

Cara Kerja poster #

Atribut poster menerima URL gambar. Selama video belum diputar, gambar tersebut ditampilkan memenuhi area video; pengunjung melihatnya bersama tombol putar, bukan bidang kosong. Begitu pemutaran dimulai, poster diganti tampilan video sesungguhnya dan tidak pernah tampil lagi selama video berjalan.

Mekanismenya efisien: poster dimuat sebagai gambar biasa — berkas kecil yang tampil hampir seketika — sementara data video sama sekali belum diunduh. Halaman tampak utuh sejak detik pertama tanpa memaksa browser menarik berkas video yang besar. Poster sekaligus berperan sebagai papan perkenalan: foto makanan untuk video resep, wajah narasumber untuk wawancara.

Ukuran gambar sebaiknya sama dengan ukuran tampilan video — 640x360 piksel untuk video 640x360. Rasio aspek yang berbeda tidak terpasang rapi: sebagian browser merentang gambar hingga berubah bentuk, sebagian lain menampilkannya dengan pita kosong di sisinya. Berkas poster yang terlalu besar juga sia-sia karena gambar itu hanya tampil sekilas.

Contoh video tutorial rendang dengan sampulnya:

html 
<video src="video/tutorial-rendang.mp4" controls width="640" height="360"
       poster="video/sampul-rendang.jpg"></video>

Hasil Render:

Pada demo, video diganti video contoh daring (CC0, dari MDN) dan fotonya diganti placeholder SVG berukuran sama — 640x360 — dengan ukuran tampil video. Tekan putar dan perhatikan poster diganti gambar bergerak begitu pemutaran dimulai. Demo membutuhkan koneksi internet.

Mari kita telaah kode di atas:

  1. Baris 1-2 (<video ...>): elemen pemutar dengan src, controls, width, dan height seperti biasa.
  2. Atribut poster="video/sampul-rendang.jpg": gambar sampul yang ditampilkan sebelum video diputar; nilainya URL menuju berkas gambar.
  3. Urutan atribut bebas: poster boleh ditulis di posisi mana pun pada tag pembuka; penulisan dua baris pada contoh hanya menjaga keterbacaan.

Memilih Gambar Poster #

Tiga kriteria yang perlu dipenuhi gambar poster:

  • Rasio aspek dan resolusi sama dengan ukuran tampilan video.
  • Ukuran berkas kecil — gunakan kompresi JPEG atau WebP yang wajar agar poster tampil seketika.
  • Isinya mewakili video; poster yang menampilkan adegan yang tidak ada di dalam video justru mengecoh pengunjung.

Ringkasan #

  • poster menerima URL gambar yang ditampilkan sebelum video diputar.
  • Tanpa poster, area video tampil kosong sampai frame pertama termuat.
  • Ukuran poster idealnya sama dengan ukuran tampilan video agar terpasang tanpa merubah bentuk.
  • Poster hanya tampilan — durasi dan isi video tidak berubah.

Pengunjung kini bisa memutar video dengan nyaman. Namun bagi pengunjung yang tidak dapat mendengar, video bersuara tetap setengah kosong — chapter berikutnya membahas teks yang menutup celah itu: captions dan subtitles.