Belajar HTML#14 – Menambahkan Video Pada HTML

Selain menambahkan gambar dan Audio Pada HTML, anda juga dapat menambahkan video pada halaman web HTML. Untuk menambahkan video pada HTML dapat menggunakan tag <video>.

Format file video HTML

Untuk menambahkan Video Menggunakan HTML, tidak semua format file video yang disupport pada browser. Berikut ini merupakan tabel browser yang telah mensupport dari tag video di HTML 5.

BrowserChromeInternet ExplorerMozilla FirefoxSafariOpera
Support Version4.09.03.54.010.5

Jika tag video di buka pada browser yang tidak disupport, maka teks browser tersebut tidak video akan ditampilkan. Hal ini karena masing masing browser mempunyai kemampuan yang berbeda dalam mensupport format video yang akan ditampilkan di halaman web. Adapun format file video yang disupport oleh tag <video> HTML 5 antara lain :

BrowserMP4WebMOgg
Internet ExplorerIyaTidakTidak
ChromeIyaIyaIya
FirefoxIyaIyaIya
SafariIyaNoTidak
OperaIya (versi Opera 25)IyaIya

Pada tabel diatas, dapat kita simpulkan bahwa tidak semua format video dapat ditampilkan di HTML. Format file yang disupport HTML 5 adalah mp4,webm, dan ogg. Jika anda mempunyai video dengan format yang berbeda, maka anda harus mengubahnya dulu agar bisa ditambahkan ke HTML. Adapun type dari format file tersebut bisa dilihat di tabel dibawah ini :

Format FILEMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Atribut untuk Video

Selain format file dan type, Tag <video> juga mempunyai beberapa atribut, diantaranya :

Nama AtributNilaiFungsi
autoplaytrue/falseVideo akan diputar otomatis
controlstrue/falseMengaktifkan control video player
looptrue/falseMemutar video terus menerus
mutedtrue/falseMenonaktifkan audio
posterImage PathMenentukan gambar cover dari video
width & heightangkaMenentukan tinggi dan lebar video
playsinlinetrue/falseMemutar video secara ‘inline’

Tabel diatas merupakan atribut video yang biasanya sering digunakan untuk menambahkan video pada web HTML. Anda dapat melihat atribut lainnya di MDN: The Video Embed element.

Cara Menambahkan Video Menggunakan HTML 5

Sekarang kita akan mencoba membuat code sederhana yang akan menampilkan file video dengan HTML 5

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Menambahkan Video pada halaman Web </title>
</head>
<body>
  <h1>Menambahkan Video pada Web HTML</h1>
  <video controls>
    <source src="Globe.mp4" type="video/MP4" />
    tag ini tidak didukung oleh browser anda, silahkan upgrade browser anda terlebih dahulu!
  </video>
</body>
</html>

Hasilnya:

Menambahkan Video pada HTML

Pada contoh di atas, file videonya berada dalam satu folder dengan file HTML, jadi kita bisa menuliskan secara langsung nama video yang akan ditampilkan tersebut.

Apabila file video tersebut tersimpan di folder yang berbeda, maka kita perlu menulis alamat folder atau path-nya. Misalkan, saya menaruh videonya di dalam path : E:\test

Maka, alamat path yang digunakan adalah:

  <video controls>
    <source src="E:\test/Globe.mp4" type="video/MP4" />
  </video>

Jika videonya berada di halaman website, maka kita harus menulis atribut src dengan URL lengkap dari video tersebut.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Menambahkan Video pada Web</title>
</head>
<body>
  <h1>Menambahkan Video pada Web HTML</h1>
  <video controls>
    <source src="https://videos.files.wordpress.com/R7EtPUzt/animasi.mp4" type="video/MP4" />
  </video>
</body>
</html>

Hasilnya :

Menambahkan Video pada HTML

Membuat video menjadi gambar gif di HTML

Kita dapat menggunakan video sebagai pengganti animasi gif. Hal ini karena ukuran file dari video jauh lebih kecil dibandingkan dengan gif, sehingga akan mempengaruhi kecepatan download. Anda dapat melihat perbedaannya pada gambar dibawah ini.

Untuk membuat video menjadi gambar gif di HTML, kita harus mengaktifkan beberapa atribut seperti autoplay loop muted playsinline

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Contoh Video sebagai gif</h1>
  <video autoplay loop muted playsinline>
    <source src="https://videos.files.wordpress.com/R7EtPUzt/animasi.mp4" type="video/mp4" />
  </video>  
</body>
</html>

Hasilnya:

Menambahkan Video pada HTML

Menambahkan Video dari Youtube

Kita dapat memanfaatkan video dari Youtube untuk ditampilkan pada halaman web menggunakan Tag <iframe>. Adapun caranya adalah sebagai berikut :

1. Buka youtube dan cari video yang ingin ditampilkan.

2. Klik tombol “bagikan” pada bagian bawah video Youtube

3. Setelah itu akan muncul opsi untuk share video, pilih opsi “sematkan”.

Menambahkan Video pada HTML

4. Lalu kita akan mendapatkan kode HTML untuk embed video, silahkan salin kode tersebut ke file HTML.

4. Tambahkan kode yang telah disalin tadi pada ke file HTML dibagian tag iframe .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Menambahkan Video dari Youtube</title>
</head>
<body>
  <h1>Video Youtube</h1>
  <!-- kode HTML youtube pada tag iframe-->
<iframe 
  width="560" height="315" src="https://www.youtube-nocookie.com/embed/YT9EtCUv-5k?start=71" 
  title="YouTube video player" frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>
</body>
</html>

Hasilnya:

Menambahkan Video pada HTML

Penutup

Begitulah cara menambahkan video pada halaman web menggunakan HTML, yang telah saya rangkum meliputi :

  • Menampilkan file video file lokal dan URL web
  • Merubah video menjadi gambar gif di HTML
  • Menambahkan Video dari Youtube

Sekian untuk pembahasan kali ini dan semoga mudah dipahami. Semoga bermanfaat …

Tinggalkan Balasan

Scroll to Top