HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Salah satu fitur yang bisa ditampilkan di halaman web adalah video. Dalam artikel ini, saya akan menjelaskan cara menampilkan video menggunakan HTML.


  1. Format video Format video yang dapat ditampilkan di halaman web adalah MP4, WebM, dan Ogg. Pada umumnya, format MP4 sudah cukup populer dan didukung oleh sebagian besar browser.

  2. Menambahkan video ke halaman web Untuk menambahkan video ke halaman web, kita perlu menggunakan tag HTML <video>. Berikut contoh tag untuk menambahkan video:

bash
<video controls>
  <source src="nama-file-video.mp4" type="video/mp4">
</video>

Penjelasan kode di atas:

  • Tag <video> digunakan untuk menampilkan video.
  • Atribut "controls" menampilkan tombol play, pause, volume, dan lain-lain untuk mengontrol video.
  • Tag <source> digunakan untuk menentukan sumber video dan formatnya. Atribut "src" digunakan untuk menentukan nama file video dan atribut "type" digunakan untuk menentukan format video.

Kita juga dapat menambahkan lebih dari satu tag <source> untuk menyediakan alternatif format video yang didukung oleh browser yang berbeda. Berikut contoh tag dengan dua sumber video:

bash
<video controls>
  <source src="nama-file-video.mp4" type="video/mp4">
  <source src="nama-file-video.webm" type="video/webm">
</video>
  1. Ukuran video Kita dapat menentukan ukuran video dengan menggunakan atribut "width" dan "height" pada tag <video>. Berikut contoh tag dengan ukuran video 640 x 360 piksel:
bash
<video controls width="640" height="360">
  <source src="nama-file-video.mp4" type="video/mp4">
</video>
  1. Autoplay video Kita dapat menambahkan atribut "autoplay" pada tag <video> untuk membuat video otomatis diputar saat halaman web dimuat. Namun, beberapa browser memblokir autoplay untuk menghemat data dan mencegah kebisingan. Berikut contoh tag dengan autoplay video:
bash
<video controls autoplay>
  <source src="nama-file-video.mp4" type="video/mp4">
</video>
  1. Video loop Kita dapat menambahkan atribut "loop" pada tag <video> untuk membuat video diputar secara berulang-ulang. Berikut contoh tag dengan video loop:
bash
<video controls loop>
  <source src="nama-file-video.mp4" type="video/mp4">
</video>
  1. Menambahkan poster Kita dapat menambahkan gambar poster untuk ditampilkan sebelum video diputar. Ini dapat berguna untuk menunjukkan preview video atau menyediakan gambar default jika video tidak dapat dimainkan. Berikut contoh tag dengan gambar poster:
bash
<video controls poster="nama-file-gambar.jpg">
  <source src="nama-file-video.mp4" type="video/mp4">
</video>
  1. Menambahkan teks alternatif Kita dapat menambahkan teks alternatif untuk video untuk membantu aksesibilitas dan juga untuk menunjukkan deskripsi video jika video tidak dapat dimainkan. Berikut contoh tag dengan teks alternatif:
bash
<video controls>
<source src="nama-file-video.mp4" type="video/mp4">

  <p>Teks alternatif untuk video</p>
</video>

Penjelasan kode di atas:

  • Tag <p> digunakan untuk menampilkan teks alternatif untuk video.
  1. Menambahkan subtitel Kita dapat menambahkan subtitle ke video menggunakan tag <track>. Berikut contoh tag dengan subtitle:
    2. php
    <video controls>
  <source src="nama-file-video.mp4" type="video/mp4">
  <track label="Indonesia" kind="subtitles" srclang="id" src="nama-file-subtitle.vtt">
</video>

    Penjelasan kode di atas:

    • Tag <track> digunakan untuk menambahkan subtitle ke video.
    • Atribut "label" digunakan untuk menampilkan label subtitle.
    • Atribut "kind" digunakan untuk menentukan jenis subtitle, yaitu "subtitles".
    • Atribut "srclang" digunakan untuk menentukan bahasa subtitle.
    • Atribut "src" digunakan untuk menentukan sumber subtitle dalam format WebVTT.
  2. Kesimpulan Menampilkan video menggunakan HTML sangat mudah dan bisa dilakukan dengan tag <video>. Kita dapat menambahkan berbagai atribut dan fitur, seperti ukuran video, autoplay, loop, poster, teks alternatif, dan subtitle. Dengan menambahkan video ke halaman web, kita dapat membuat konten yang lebih menarik dan interaktif bagi pengunjung.