Estimasi Waktu Baca: 2 menit

Pemanasan

Dalam dunia yang serba digital ini kebutuhan informasi bisa didapatkan darimana saja termasuk dari internet, dan informasi ini tidak selalu berupa teks atau gambar, namun juga bisa berupa video.

Apalagi sekarang juga lagi maraknya yang namanya youtube, membuat para konten creator seperti blogger mulai beralih ke platform tersebut.

Dalam HTML yang namanya video dapat kita buat dengan mudah karena sudah diwakili oleh suatu tag.

Jika kalian ingin tahu tag apakah itu, maka mari kita simak bersama.

Menambahkan Video di HTML

Dahulu sebelum HTML berkembang menjadi HTML 5, untuk membuat media player pada HTML dibutuhkan campur tangan program eksternal seperti adobe flash player.

Namun sekarang tidak perlu lagi karena HTML 5 sudah memiliki tag <video> yang memungkinkan kita untuk menambahkan <video> pada browser.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Video di HTML</title>
</head>
<body>
	<h1>Tutorial Video HTML</h1>
	<video controls width="320" height="240">
		<source src="coffee.mp4" type="video/mp4">
	</video>
</body>
</html>

Keluaran:

Atribut Untuk Video

Tag video mendukung beberapa atribut di bawah ini:

AtributFungsiNilai
autoplaymembuat video diputar otomatistrue/false
controlsmenampilkan pengaturan kontrol videotrue/false
loopmembuat video diputar berulang-ulangtrue/false
mutedmembuat video menjadi senyaptrue/false
postermenentukan gambar cover dari videolokasi gambar
preloadmenentukan seberapa penting video dimuatauto, metadata, none
srcmenentukan alamat lokasi videoURL video
widthmengatur lebar videoangka
heightmengatur tinggi videoangka

Atribut width dan height

Kedua atribut ini banyak kita gunakan dalam mengatur ukuran lebar dan tinggi gambar. Namun selain itu kedua atribut ini nyatanya juga dapat digunakan untuk mengatur lebar dan tinggi dari file media lain seperti video.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Video di HTML</title>
</head>
<body>
	<h1>Tutorial Video HTML</h1>
        <video controls width="280" height="200">
		<source src="coffee.mp4" type="video/mp4">
	</video>
	<video controls width="320" height="240">
		<source src="coffee.mp4" type="video/mp4">
	</video>
        <video controls width="400" height="320">
		<source src="coffee.mp4" type="video/mp4">
	</video>
</body>
</html>

Keluaran:

Atribut poster

Atribut poster digunakan untuk menentukan gambar ketika video akan diputar atau sedang diunduh. Jika atribut ini tidak didefinisikan maka secara default akan mengambil frame pertama dari video tersebut.

Contoh penerapan:

<!DOCTYPE html> <html> <head> <title>Belajar Video di HTML</title> </head> <body> <h1>Tutorial Video HTML</h1> <video controls width=”320″ height=”240″ poster=”kopi-logo.png”> <source src=”coffee.mp4″ type=”video/mp4″> </video> </body> </html>

Keluaran:

Format File Video yang didukung HTML

FormatTipe Media
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Sedangkan bila video yang kalian punya tidak memiliki format seperti ketiga format di atas, maka kalian wajib menggantinya.