Media HTML: Menambahkan Audio dan Video ke Halamanmu

Dulu, menaruh suara atau video di halaman web itu ribet setengah mati — harus berurusan dengan plugin browser seperti Flash yang berat, rawan celah keamanan, dan bikin sengsara di ponsel. HTML mengakhiri semua drama itu. Sekarang kamu cukup pakai satu elemen untuk menanam video atau klip suara, tanpa plugin apa pun, dan langsung jalan. Di artikel ini kamu bakal belajar elemen <audio> dan <video> dengan tuntas: cara mengarahkannya ke berkas media, cara menawarkan lebih dari satu format, sampai bagian-bagian yang agak rewel seperti pembatasan autoplay, caption, dan performa saat memuat.

Materi ini melanjutkan apa yang sudah kamu tahu soal elemen dan atribut HTML. Jadi kalau ada sintaks atribut yang terasa asing, ada baiknya kamu menengok kembali ke atribut HTML dulu. Elemen media ini sangat mengandalkan atribut untuk bekerja.

Elemen <video>

Video paling sederhana bentuknya seperti ini:

<video src="trailer.mp4" controls></video>

Itu sudah jadi pemutar video yang utuh dan berfungsi. Atribut src menunjuk ke berkasnya, dan controls menyuruh browser menggambar tombol play, batang geser (scrubber), pengatur volume, dan tombol layar penuh. Tanpa controls, video tetap dimuat — tapi pengunjung tidak punya cara untuk memutar, menjeda, atau mencari posisinya, dan itu hampir tidak pernah kamu mau.

Biasanya kamu juga ingin menentukan ukurannya, supaya halaman tidak melonjak-lonjak saat video sedang dimuat:

<video src="trailer.mp4" controls width="640" height="360"></video>

Isi width dan height sesuai rasio aspek asli videonya. Browser langsung mencadangkan ruang sebesar itu, jadi tata letakmu tetap diam di tempat alih-alih bergeser ketika berkasnya datang.

Beberapa format dengan <source>

Ada satu jebakan dari cara pakai src tunggal tadi: tidak semua browser bisa memutar setiap format video. Kebanyakan browser modern lancar memutar MP4 (H.264), tapi biar aman — sekaligus mendukung lebih banyak perangkat — kamu menawarkan video yang sama dalam beberapa format dan membiarkan browser memilih yang pertama bisa ia mengerti.

Caranya, lepas src dari tag <video>, lalu daftarkan beberapa anak <source> di dalamnya:

<video controls width="640" height="360">
  <source src="trailer.webm" type="video/webm" />
  <source src="trailer.mp4" type="video/mp4" />
  Maaf, browser kamu tidak bisa memutar video ini.
</video>

Browser membaca tag <source> dari atas ke bawah dan memakai format pertama yang ia dukung, sisanya diabaikan. Atribut type memberi tahu formatnya sejak awal, jadi browser tidak perlu mengunduh berkas dulu cuma untuk tahu kalau ia tidak bisa memutarnya. Taruh format paling modern dengan kompresi terbaik di urutan pertama (di sini WebM), lalu MP4 yang dukungannya luas sebagai cadangan yang andal.

Teks polos setelah daftar source itu — “Maaf, browser kamu tidak bisa memutar video ini.” — adalah konten cadangan. Teks itu cuma muncul kalau browser tidak mendukung elemen <video> maupun format apa pun yang kamu tawarkan. Di browser masa kini, praktis tidak ada yang pernah melihatnya.

Elemen <audio>

Audio bekerja nyaris sama persis — ide sama, atribut sama, cuma tanpa gambar:

<audio controls>
  <source src="podcast.ogg" type="audio/ogg" />
  <source src="podcast.mp3" type="audio/mpeg" />
  Browser kamu tidak mendukung pemutaran audio.
</audio>

Secara bawaan, elemen <audio> tampil sebagai bilah pemutar ramping berisi tombol play, jalur progres, dan pengatur volume. MP3 adalah format yang aman dan universal; OGG adalah alternatif terbuka yang ukurannya lebih kecil dan bisa kamu tawarkan lebih dulu. Semua hal yang kamu pelajari soal atribut <video> di bawah ini juga berlaku untuk <audio>, kecuali yang sifatnya khusus visual seperti poster dan width/height.

Atribut yang mengatur pemutaran

Ada beberapa atribut yang membentuk perilaku medianya. Kamu bisa memadu-madankannya di kedua elemen:

• controls — menampilkan antarmuka pemutar bawaan browser. Hampir selalu kamu butuh ini.
• autoplay — mulai memutar begitu medianya siap. Pakai dengan sangat hati-hati (bahasannya di bawah).
• muted — mulai dalam keadaan tanpa suara. Sering dipasangkan dengan autoplay.
• loop — memutar ulang otomatis begitu sampai di ujung.
• preload — memberi petunjuk ke browser seberapa banyak yang perlu diunduh lebih awal: none (tunggu sampai pengguna menekan play), metadata (cukup ambil durasi dan dimensinya), atau auto (browser yang memutuskan, bisa jadi seluruh berkas).
• poster (khusus video) — gambar yang ditampilkan sebelum video diputar, menggantikan frame pertama yang kosong atau membeku.

Berikut satu video yang memakai beberapa atribut tadi sekaligus:

<video
  controls
  poster="cover.jpg"
  preload="metadata"
  width="640"
  height="360"
>
  <source src="demo.webm" type="video/webm" />
  <source src="demo.mp4" type="video/mp4" />
</video>

poster memberi pemutar sebuah thumbnail yang rapi sebelum diputar, dan preload="metadata" menjaga unduhan awal tetap ringan — browser cuma mengambil secukupnya untuk tahu durasinya, lalu menunggu sampai pengguna benar-benar menekan play sebelum mengunduh sisanya.

Caption dan subtitle dengan <track>

Video yang berisi ucapan sebaiknya disertai caption — buat penonton yang tuli atau sulit mendengar, buat siapa pun yang menonton tanpa suara, dan jujur saja buat semua orang yang sedang berada di ruangan ramai. Kamu menambahkan caption lewat elemen <track> di dalam <video>:

<video controls width="640" height="360">
  <source src="kuliah.mp4" type="video/mp4" />
  <track
    src="kuliah-id.vtt"
    kind="captions"
    srclang="id"
    label="Indonesia"
    default
  />
</video>

Caption-nya hidup di sebuah berkas WebVTT terpisah (berkas teks .vtt) yang berisi daftar tiap baris teks beserta cap waktu kapan ia harus muncul. Pada elemen <track>:

• kind="captions" menyatakan ini adalah caption (bukan subtitle, deskripsi, atau bab).
• srclang="id" mendeklarasikan bahasanya.
• label="Indonesia" adalah nama yang dilihat pengguna di menu track.
• default menandai track ini untuk ditampilkan otomatis.

Kamu boleh menyertakan beberapa elemen <track> untuk bahasa yang berbeda-beda, dan browser akan menawarkannya di menu caption miliknya.

Menyatukan semuanya: satu blok media lengkap

Berikut semuanya dalam satu contoh yang realistis — video dengan dua format, poster, preload yang ringan, caption, plus cadangan yang luwes:

<figure>
  <video
    controls
    poster="tur-produk.jpg"
    preload="metadata"
    width="800"
    height="450"
  >
    <source src="tur-produk.webm" type="video/webm" />
    <source src="tur-produk.mp4" type="video/mp4" />
    <track
      src="tur-produk-id.vtt"
      kind="captions"
      srclang="id"
      label="Indonesia"
      default
    />
    <p>
      Browser kamu tidak bisa memutar video ini.
      <a href="tur-produk.mp4">Unduh saja berkasnya</a>.
    </p>
  </video>
  <figcaption>Tur singkat dasbor ACY Partner Indonesia.</figcaption>
</figure>

Membungkus media di dalam <figure> beserta <figcaption> adalah cara yang bersih dan semantik untuk memberinya keterangan — pola yang sama seperti yang kamu pakai untuk gambar. Perhatikan juga, cadangan di sini bukan cuma teks polos: ada tautan unduh, jadi sekalipun pengunjung memakai perangkat yang aneh, mereka tidak ditinggal kebingungan.

Praktik terbaik dan kapan memakai apa

Ada beberapa kebiasaan yang membedakan blok media yang sekadar jalan dengan yang jalannya bagus:

• Selalu sertakan controls kecuali kamu punya alasan yang sangat spesifik untuk tidak (misalnya video latar tanpa suara). Mencabut kontrol berarti mencabut kendali dari pengguna.
• Tawarkan setidaknya dua format lewat <source> — yang modern di urutan pertama (WebM), yang universal di urutan kedua (MP4 / MP3). Tidak ada ruginya, dan jangkauanmu jadi lebih luas.
• Kompres berkasmu. Video terutama bisa berukuran raksasa. Video gembung tanpa kompresi adalah cara tercepat membuat halaman terasa lambat sekaligus menguras kuota data seluler pengunjung. Ekspor dengan resolusi dan bitrate yang masuk akal sebelum kamu unggah.
• Pakai preload="metadata" atau preload="none" untuk media yang bukan sajian utama, supaya kamu tidak mengunduh bermegabita-megabita yang mungkin tidak pernah ditonton pengunjung.
• Set width dan height untuk mencegah pergeseran tata letak, lalu skalakan secara responsif dengan CSS.
• Tambahkan caption untuk apa pun yang ada ucapannya.
• Jangan pernah autoplay dengan suara. Bisukan kalau memang harus autoplay, atau tunggu sampai ada klik.

Kapan sebaiknya kamu memakai elemen ini? Pakai <audio> untuk podcast, cuplikan musik, klip pelafalan, efek suara — apa pun yang didengarkan pengguna. Pakai <video> untuk tutorial, demo produk, suasana latar, apa pun yang ditonton. Untuk video yang dihosting di tempat lain — klip YouTube atau Vimeo — kamu sama sekali tidak memakai <video>; kamu menanam pemutar milik penyedianya lewat <iframe>, dan itu topik tersendiri.

Penutup

Media bawaan di HTML benar-benar enak dikerjakan begitu kamu paham bagian-bagiannya:

• <video> dan <audio> menanam media tanpa plugin — tambahkan controls, dan kamu langsung punya pemutar yang berfungsi.
• Pakai anak <source> untuk menawarkan beberapa format supaya tiap browser bisa memilih satu yang ia dukung; browser mengambil yang pertama cocok.
• Atribut-atribut kunci — autoplay, muted, loop, preload, dan poster (khusus video) — membentuk perilaku pemutaran dan seberapa banyak yang dimuat di awal.
• Autoplay dengan suara diblokir; pola yang berhasil adalah autoplay muted.
• Tambahkan caption <track> untuk media apa pun yang ada ucapannya — ini standar yang bertanggung jawab, bukan tempelan belakangan.
• Perhatikan performa: kompres berkasmu dan preload secukupnya saja.

Dengan audio dan video di kotak perkakasmu, halamanmu bisa berbuat jauh lebih banyak daripada sekadar teks dan gambar. Selanjutnya dalam perjalanan HTML ini, kamu bakal melihat cara menanam konten dari situs lain — peta, video yang dihosting, widget — lewat elemen <iframe>, yang melanjutkan persis dari titik ini.