Cara Menambahkan Video di HTML



Sebelum HTML 5 keluar kita perlu menambahkan program lain untuk menampilkan video di html menggunakan adobe flash, namun sekarang cukup menambahkan tag <video> cukup mudah bukan. Element tag ini akan menghasilkan tampilan berupa video player yang dilengkapi dengan berbagai control video seperti tombol play, pause, stop, duration, tracking bar, volume dan lainnya.

HTML tag <video> dalam memutar file video dilakukan dengan perujukkan melalui atribut src, atribut tersebut merupakan sumber (source) yang berisi URL di mana file video tersebut berada.

Contoh script untuk menampilkan video

<!DOCTYPE html>
<html >
<head>
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
  <video controls>
    <source src="nama file video.webm" type="video/webm" />
    Browsermu tidak mendukung tag ini, silakan upgrade browser kamu!
  </video>
</body>
</html>

Dari contoh di atas, kita menuliskan secara langsung nama video yang ditampilkan. Karena videonya yang ditampilkan berada dalam satu folder dengan file HTML.

Jika video tersebut tersimpan di folder yang berbeda, maka perlu ditulis alamat folder atau path-nya. Misalkan folder videonya terpisah maka alamat path yang digunakan adalah:

<video>
<source src="Folder/nama-video.mp4">
</video>

Menambahkan video dari web lain seperti youtube

1. Tambahkan dulu kode html seperti berikut

<!DOCTYPE html>
<html >
<head>
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
 
</body>
</html>

2. Selanjutnya buka alamat youtube.com. Selanjutnya, cari video yang ingin dimasukkan.

3. Jika sudah menemukan video yang dicari, klik Bagikan (seperti gambar di bawah ini).


4. Selanjutnya akan tampil menu seperti di bawah ini. Kemudian klik Sematkan, seperti gambar di bawah ini.




5. Copikan script link video, ke dalam file html yang anda buat seperti contoh di bawah ini.

<!DOCTYPE html>
<html >
<head>
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
  paste code link di sini
</body>
</html>

6. Jalankan file html tersebut di browser


Post a Comment

Previous Post Next Post