Langsung ke konten

Video di HTML: Cara Menampilkan Pemutar Video dengan `<video>`

Pelajari cara menampilkan video di HTML menggunakan tag <video>. Pahami attribute controls, width, height, poster, dan cara embed YouTube video.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah membahas audio, kita lanjut ke video.

Tag <video>

Tag <video> digunakan untuk menampilkan pemutar video di halaman web:

<video src="video.mp4" controls>
  Browser kamu tidak mendukung video.
</video>

Teks di dalam tag <video> muncul jika browser tidak mendukung elemen ini.

Attribute pada <video>

controls

Menampilkan kontrol pemutar (play, pause, volume, fullscreen, seek):

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

width dan height

Mengatur ukuran pemutar video:

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

poster

Menampilkan gambar sebelum video diputar:

<video src="video.mp4" controls poster="thumb.jpg"></video>

poster berfungsi seperti thumbnail. Gambar akan hilang saat video mulai diputar.

autoplay

Video otomatis diputar saat halaman dimuat:

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

Sama seperti audio, banyak browser memblokir autoplay.

loop

Video diputar berulang-ulang:

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

muted

Video dimulai dalam keadaan mute:

<video src="video.mp4" controls muted autoplay></video>

Autoplay lebih diizinkan jika dalam keadaan muted.

preload

Mengontrol cara browser memuat video:

<video src="video.mp4" controls preload="metadata"></video>

Pilihan: auto, metadata, none.

Element <source>

Sediakan beberapa format video untuk kompatibilitas:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Browser kamu tidak mendukung video.
</video>

Format Video Umum

FormatEkstensiKelebihanKekurangan
MP4.mp4Kompatibilitas luasUkuran agak besar
WebM.webmUkuran kecil, kualitas baikKompatibilitas terbatas
OGG.ogvOpen sourceKompatibilitas terbatas

Embed Video YouTube

Untuk video YouTube, gunakan <iframe>:

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

Ganti VIDEO_ID dengan ID video YouTube. ID ada di URL setelah v=, misalnya:

  • URL: https://www.youtube.com/watch?v=7ItI5aAHGZE
  • Video ID: 7ItI5aAHGZE

Video dengan Subtitle

Gunakan tag <track> untuk menambahkan subtitle:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track src="subtitle-id.vtt" kind="subtitles" srclang="id" label="Indonesia" default />
  <track src="subtitle-en.vtt" kind="subtitles" srclang="en" label="English" />
</video>

Format Subtitle

Format yang didukung: WebVTT (.vtt)

Contoh file WebVTT:

WEBVTT

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

00:00:05.000 --> 00:00:08.000
Kita akan belajar tentang video.

Contoh Video Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Pemutar Video</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 20px 0;
      }
      video {
        width: 100%;
        border-radius: 8px;
      }
      .video-info {
        margin-top: 10px;
        padding: 10px;
        background: #f4f4f4;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>Pemutar Video</h1>

    <!-- Video Lokal -->
    <div class="video-container">
      <h3>Video Tutorial</h3>
      <video controls poster="thumb-tutorial.jpg">
        <source src="tutorial.mp4" type="video/mp4" />
        <source src="tutorial.webm" type="video/webm" />
        Browser kamu tidak mendukung video.
      </video>
      <div class="video-info">
        <p>Video tutorial belajar HTML untuk pemula.</p>
      </div>
    </div>

    <!-- Video YouTube -->
    <div class="video-container">
      <h3>Video YouTube</h3>
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/7ItI5aAHGZE"
        title="Contoh Video YouTube"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>
  </body>
</html>

Kontrol Video dengan JavaScript

<video id="myVideo" src="video.mp4" controls></video>

<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
<button onclick="fullscreen()">Fullscreen</button>

<script>
  const video = document.getElementById('myVideo');

  function playVideo() { video.play(); }
  function pauseVideo() { video.pause(); }
  function stopVideo() {
    video.pause();
    video.currentTime = 0;
  }
  function fullscreen() {
    video.requestFullscreen();
  }
</script>

Best Practice Video

  1. Sediakan multiple format — MP4 sebagai utama, WebM sebagai alternatif
  2. Gunakan poster — Tampilkan thumbnail sebelum video diputar
  3. Pertimbangkan hosting video di YouTube/Vimeo — Menghemat bandwidth
  4. Tambahkan subtitle — Untuk aksesibilitas dan SEO
  5. Gunakan responsive video — width: 100% di CSS
  6. Optimasi ukuran file — Kompres video sebelum upload

Ringkasan

  • <video> untuk menampilkan pemutar video
  • Attribute: controls, width, height, poster, autoplay, loop, muted, preload
  • <source> untuk multiple format
  • <iframe> untuk embed YouTube/Vimeo
  • <track> untuk subtitle
  • Format umum: MP4, WebM, OGG

Langkah Selanjutnya

Kamu sudah memahami cara menampilkan video. Artikel selanjutnya membahas embed content di HTML, cara menyematkan konten eksternal seperti Google Maps dan social media.