HTML Video

Tutorial HTML; Diperbarui tanggal: 9/09/2025

HTML Video adalah sebuah elemen HTML yang digunakan untuk menampilkan video di halaman web. Elemen ini memungkinkan pengembang web untuk memasukkan video ke dalam halaman web mereka dengan mudah, dan memungkinkan pengguna untuk menonton video langsung di dalam browser mereka tanpa harus menggunakan program pemutar video eksternal.

Elemen HTML Video memiliki beberapa atribut, seperti src (untuk menentukan URL dari video), width dan height (untuk menentukan dimensi video), controls (untuk menampilkan kontrol pemutaran video seperti tombol play, pause, dan volume), dan lain-lain. Pengembang web juga dapat menggunakan JavaScript untuk mengontrol pemutaran video, seperti memulai atau menghentikan video secara otomatis, menentukan waktu yang tepat untuk mulai dan berhenti memutar video, dan lain-lain.

Dalam HTML5, elemen Video juga mendukung format video modern seperti MP4, WebM, dan Ogg Theora. Hal ini memudahkan pengembang web untuk menampilkan video di berbagai platform dan perangkat tanpa harus khawatir tentang dukungan format video yang berbeda-beda.

Elemen <video> HTML

Untuk menampilkan video dalam HTML kita dapat menggunakan tag <video>. Contoh:

<video width="400" height="300" controls>
  <source src="video.mp4" type="video/mp4">
  Browser anda tidak mendukung untuk menampilkan video
</video>

Atribut width digunakan untuk mengatur lebar sebesar 400 pixel dan atribut height digunakan untuk mengatur tinggi sebesar 300 pixel. Penggunaan elemen <video> diikuti dengan penggunaan elemen <source> yang terdapat atribut src yang berisi lokasi atau url video yang akan diputar.

Atribut Autoplay pada <video> HTML

Atribut autoplay digunakan untuk memberikan instruksi pada browser untuk memulai pemutaran video secara otomatis setelah halaman web dimuat.

<video width="400" height="300" controls autoplay >
  <source src="video.mp4" type="video/mp4">
  Browser anda tidak mendukung untuk menampilkan video
</video>

Menyembunyikan kontrol pada video

Untuk menyembunyikan kontrol pada tag video HTML dengan menghilangkan atribut controls pada tag <video> dan CSS. Atribut controls digunakan untuk menampilkan kontrol standar untuk pemutaran video seperti tombol play/pause, tombol mundur/maju, dan pengatur volume.

Contoh:

<!DOCTYPE html>
  <html>
    <head>
      <title>HTML Video</title>
         <style>       
            video::-webkit-media-controls {
                   display:none !important;
             }
         </style>
    </head>
  <body>

    <video width="400" height="300" autoplay >
      <source src="video.mp4" type="video/mp4">
       Browser anda tidak mendukung untuk menampilkan video
    </video>
  </body>
</html>