Audio & Video Embed

Audio & Video Embed 🎵🎬

HTML5 memperkenalkan tag <audio> dan <video> yang memungkinkan kita menyematkan media langsung ke halaman web tanpa plugin tambahan seperti Flash. Cukup dengan HTML murni, browser sudah bisa memutar audio dan video.

Tag <audio> — Menyematkan Suara

Struktur dasarnya sangat sederhana:

<audio src="musik.mp3" controls></audio>

Atribut controls adalah yang membuat tombol play, pause, volume, dan progress bar muncul. Tanpanya, audio tetap ada di halaman tapi tidak ada antarmuka untuk memutarnya.

Atribut-Atribut <audio>

<audio 
  src="podcast.mp3"
  controls
  autoplay
  loop
  muted
  preload="auto"
>
</audio>

Nilai preload:

preload="auto"     → browser memuat seluruh file di background
preload="metadata" → hanya muat informasi dasar (durasi, dll)
preload="none"     → tidak dimuat sampai user menekan play

⚠️ autoplay seringkali diblokir browser modern kecuali dikombinasikan dengan muted — browser menganggap audio autoplay tanpa mute sebagai pengalaman yang mengganggu pengguna.

Multiple Source — Fallback Format

Tidak semua browser mendukung format audio yang sama. Gunakan tag <source> untuk menyediakan beberapa format sekaligus — browser akan memilih yang pertama bisa diputar:

<audio controls>
  <source src="musik.ogg" type="audio/ogg">
  <source src="musik.mp3" type="audio/mpeg">
  <source src="musik.wav" type="audio/wav">

  <!-- Pesan fallback jika browser tidak support tag audio sama sekali -->
  <p>Browser Anda tidak mendukung pemutaran audio. 
     <a href="musik.mp3">Unduh file audio</a> untuk mendengarkannya.</p>
</audio>

Browser membaca <source> dari atas ke bawah dan menggunakan yang pertama didukung.

Format Audio yang Didukung Browser

Rekomendasi: Selalu sediakan minimal MP3 karena didukung hampir semua browser.

Tag <video> — Menyematkan Video

Struktur dasarnya mirip dengan <audio>:

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

Atribut width dan height sangat disarankan untuk dicantumkan agar browser bisa mereservasi ruang sebelum video selesai dimuat — mencegah layout jumping.

Atribut-Atribut <video>

<video
  src="tutorial.mp4"
  controls
  autoplay
  loop
  muted
  poster="thumbnail.jpg"
  preload="metadata"
  width="800"
  height="450"
>
</video>

Atribut poster — Thumbnail Video

poster adalah atribut khusus <video> yang menentukan gambar yang tampil sebelum video diputar — seperti thumbnail di YouTube:

<video 
  controls 
  poster="cover-video.jpg"
  width="800"
>
  <source src="tutorial-html.mp4" type="video/mp4">
  <source src="tutorial-html.webm" type="video/webm">
</video>

Tanpa poster, browser menampilkan frame pertama video atau layar hitam kosong.

Multiple Source untuk Video

Sama seperti audio, video sebaiknya disediakan dalam beberapa format:

<video controls width="800" height="450" poster="thumbnail.jpg">
  <source src="film.webm" type="video/webm">
  <source src="film.mp4" type="video/mp4">
  <source src="film.ogv" type="video/ogg">

  <!-- Fallback untuk browser sangat lama -->
  <p>Browser Anda tidak mendukung tag video HTML5.
     <a href="film.mp4">Klik di sini untuk mengunduh videonya.</a>
  </p>
</video>

Format Video yang Didukung Browser

Rekomendasi: Selalu sediakan MP4 sebagai format utama karena paling universal.

Video Responsif dengan CSS

Secara default video tidak otomatis menyesuaikan lebar layar. Gunakan CSS untuk membuatnya responsif:

<style>
  .video-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .video-container video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  }
</style>

<div class="video-container">
  <video controls poster="thumbnail.jpg">
    <source src="tutorial.mp4" type="video/mp4">
  </video>
</div>

Video dengan Rasio Aspek Tetap (16:9)

Teknik klasik untuk mempertahankan rasio 16:9 di semua ukuran layar:

<style>
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;   /* 16:9 ratio = 9/16 = 56.25% */
    height: 0;
    overflow: hidden;
  }

  .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-wrapper">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

Subtitle & Caption dengan <track>

Tag <track> digunakan untuk menambahkan subtitle, caption, atau deskripsi pada video — penting untuk aksesibilitas:

<video controls width="800" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4">

  <!-- Subtitle Bahasa Indonesia -->
  <track 
    src="subtitle-id.vtt" 
    kind="subtitles" 
    srclang="id" 
    label="Bahasa Indonesia"
    default
  >

  <!-- Subtitle Bahasa Inggris -->
  <track 
    src="subtitle-en.vtt" 
    kind="subtitles" 
    srclang="en" 
    label="English"
  >
</video>

File subtitle menggunakan format WebVTT (.vtt):

WEBVTT

00:00:01.000 --> 00:00:04.000
Selamat datang di tutorial HTML dasar.

00:00:05.000 --> 00:00:09.000
Hari ini kita akan belajar tentang audio dan video embed.

Nilai Atribut kind pada <track>

Autoplay Video Background (Hero Section)

Teknik umum di website modern untuk video background di bagian hero:

<style>
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);   /* overlay gelap di atas video */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-text {
    color: white;
    text-align: center;
  }
</style>

<section class="hero">
  <video autoplay muted loop playsinline>
    <source src="background.mp4" type="video/mp4">
  </video>

  <div class="hero-overlay">
    <div class="hero-text">
      <h1>Selamat Datang</h1>
      <p>Website dengan video background</p>
    </div>
  </div>
</section>

Atribut playsinline penting untuk iOS — tanpa ini, video di Safari iPhone akan membuka fullscreen player secara otomatis.

Embed Video YouTube & Platform Lain

Untuk video dari YouTube, Vimeo, dan platform lain — tidak bisa menggunakan <video>. Gunakan <iframe> dengan URL embed yang disediakan platform tersebut:

<!-- YouTube -->
<iframe 
  width="800" 
  height="450"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Judul Video YouTube"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

<!-- Vimeo -->
<iframe 
  src="https://player.vimeo.com/video/VIDEO_ID" 
  width="800" 
  height="450" 
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
>
</iframe>

Perbedaan <video> vs <iframe> untuk Video

Ringkasan Atribut

Audio & Video (keduanya):

Khusus Video:

💡 Tips: Untuk performa optimal, kompres file video sebelum diupload ke server — gunakan tools seperti HandBrake atau FFmpeg. Video yang tidak dikompresi bisa berukuran ratusan MB dan memperlambat loading halaman secara drastis. Target ukuran yang baik adalah di bawah 10MB untuk video pendek dan selalu gunakan format MP4 dengan codec H.264 sebagai pilihan utama. 🚀