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>.

DAFTAR ISI

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.

Browser	Chrome	Internet Explorer	Mozilla Firefox	Safari	Opera
Support Version	4.0	9.0	3.5	4.0	10.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 :

Browser	MP4	WebM	Ogg
Internet Explorer	Iya	Tidak	Tidak
Chrome	Iya	Iya	Iya
Firefox	Iya	Iya	Iya
Safari	Iya	No	Tidak
Opera	Iya (versi Opera 25)	Iya	Iya

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 FILE	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Atribut untuk Video

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

Nama Atribut	Nilai	Fungsi
autoplay	true/false	Video akan diputar otomatis
controls	true/false	Mengaktifkan control video player
loop	true/false	Memutar video terus menerus
muted	true/false	Menonaktifkan audio
poster	Image Path	Menentukan gambar cover dari video
width & height	angka	Menentukan tinggi dan lebar video
playsinline	true/false	Memutar 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:

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 :

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 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”.

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: