Video: Menyematkan Video

Analogi: Televisi di Ruang Tamu

Bayangkan televisi di ruang tamu. Agar enak ditonton, TV butuh beberapa hal: layar pembuka yang menarik sebelum acara mulai (seperti poster film di bioskop), remote dengan tombol play dan volume, dan teks terjemahan di bawah layar untuk yang menonton film bahasa asing.

Tag <video> adalah televisi di halaman webmu. Atribut poster adalah "poster filmnya": gambar sampul yang tampil sebelum video diputar, supaya pengunjung tidak menatap kotak hitam kosong. Atribut controls adalah remotenya. Elemen <track> adalah teks terjemahannya: file subtitle terpisah yang bisa dinyalakan dan dimatikan penonton.

Kenapa Konsep Ini Ada

Video adalah saudara kandung audio, jadi ia mewarisi semua masalah audio (butuh plugin Flash dulu, format tidak seragam antar browser) plus satu masalah raksasa miliknya sendiri: ukuran file. Satu menit video bisa ratusan kali lebih besar dari satu menit audio. Kalau browser mengunduh seluruh video begitu halaman dibuka, kuota pengunjung langsung jebol dan halaman terasa macet.

Itulah kenapa <video> punya atribut-atribut khusus penghemat. poster memberi sesuatu yang enak dilihat tanpa mengunduh satu frame pun video. preload="metadata" hanya mengunduh info ringan seperti durasi dan dimensi, bukan isi videonya. Dan pola <source> berlapis (MP4 dulu, WebM sebagai cadangan) memastikan video bisa diputar di sebanyak mungkin browser tanpa kamu harus tahu browser apa yang dipakai pengunjung.

Ada juga masalah aksesibilitas yang unik untuk video: tidak semua orang bisa mendengar dialognya. Elemen <track> memecahkan ini dengan subtitle dalam format WebVTT, file teks biasa berisi kalimat dan penanda waktunya. Penonton tunarungu bisa mengikuti cerita, dan penonton yang menonton tanpa suara di tempat umum tetap paham isi video.

Contoh 1: Video Paling Sederhana

<video controls width="640" poster="sampul.jpg">
  <source src="profil.mp4" type="video/mp4" />
  Browser kamu tidak mendukung video.
</video>

Tiga hal penting di sini. controls menampilkan tombol play, volume, dan fullscreen bawaan browser. poster="sampul.jpg" menampilkan gambar sampul sebelum video diputar, jauh lebih profesional daripada kotak hitam. width="640" mengatur lebar tampil, tingginya mengikuti rasio asli video secara otomatis sehingga tidak gepeng. Teks di dalam adalah fallback untuk browser purba.

Contoh 2: Video Profil dengan Subtitle Dua Bahasa

Contoh yang lebih realistis: video profil usaha dengan subtitle Indonesia dan Inggris, plus atribut penghemat kuota.

<video controls width="640" poster="sampul-profil.jpg"
       preload="metadata" playsinline>
  <source src="profil.mp4" type="video/mp4" />
  <source src="profil.webm" type="video/webm" />
  <track src="subtitle-id.vtt" kind="subtitles"
         srclang="id" label="Indonesia" default />
  <track src="subtitle-en.vtt" kind="subtitles"
         srclang="en" label="English" />
  Browser kamu tidak mendukung video.
</video>

File .vtt (WebVTT) adalah file teks biasa berisi baris-baris seperti "00:00.000 --> 00:04.000" diikuti kalimat subtitle-nya. Atribut srclang menyatakan bahasa subtitle, label adalah nama yang tampil di menu pilihan subtitle pemutar, dan default menandai subtitle yang aktif pertama kali. Atribut playsinline penting untuk iPhone: tanpanya video otomatis meloncat ke mode fullscreen begitu diputar. Sedangkan preload="metadata" adalah kompromi cerdas, browser hanya mengunduh info durasi dan dimensi (kilobyte saja), isi video menunggu sampai pengguna menekan play.

Kesalahan Umum Pemula

1. Tidak memasang poster sehingga pengunjung menatap kotak hitam.

Salah:

<video controls width="640">
  <source src="profil.mp4" type="video/mp4" />
</video>

Benar:

<video controls width="640" poster="sampul-profil.jpg">
  <source src="profil.mp4" type="video/mp4" />
</video>

Kotak hitam memberi kesan video rusak atau halaman belum selesai dimuat. Poster yang bagus (frame menarik dari video, atau gambar berjudul) membuat orang ingin menekan play. Ini detail kecil dengan dampak besar pada kesan profesional.

2. Memakai GIF untuk animasi pendek padahal video jauh lebih ringan.

Salah: file animasi.gif 8 MB untuk animasi 5 detik.

Benar:

<video autoplay muted loop playsinline width="480">
  <source src="animasi.mp4" type="video/mp4" />
</video>

Video MP4 atau WebM untuk konten yang sama bisa sepuluh kali lebih kecil dari GIF karena kompresi video jauh lebih canggih. Satu-satunya kasus autoplay yang diizinkan browser adalah video bisu (muted), dan pola inilah yang dipakai semua situs modern untuk "GIF" mereka.

3. Membiarkan preload default di halaman dengan banyak video.

Salah:

<video controls width="480" poster="a.jpg">
  <source src="video-a.mp4" type="video/mp4" />
</video>
<video controls width="480" poster="b.jpg">
  <source src="video-b.mp4" type="video/mp4" />
</video>

Benar: tambahkan preload="metadata" (atau preload="none") pada tiap video. Nilai default membuat browser mulai mengunduh isi video begitu halaman dibuka. Dua video 50 MB berarti 100 MB terunduh sebelum pengunjung menekan apa pun. Di HP dengan kuota terbatas, itu bencana.

Catatan teknis: Untuk video berukuran besar atau ditonton banyak orang, jangan hosting file video di server web biasa. Pakai layanan khusus seperti YouTube (disematkan lewat iframe), Cloudflare Stream, atau Bunny Stream. Mereka punya jaringan server global dan kompresi adaptif yang menyesuaikan kualitas dengan kecepatan internet penonton, sesuatu yang tidak bisa dilakukan file MP4 statis.