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:
| Atribut | Fungsi | Nilai |
| autoplay | membuat video diputar otomatis | true/false |
| controls | menampilkan pengaturan kontrol video | true/false |
| loop | membuat video diputar berulang-ulang | true/false |
| muted | membuat video menjadi senyap | true/false |
| poster | menentukan gambar cover dari video | lokasi gambar |
| preload | menentukan seberapa penting video dimuat | auto, metadata, none |
| src | menentukan alamat lokasi video | URL video |
| width | mengatur lebar video | angka |
| height | mengatur tinggi video | angka |
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
| Format | Tipe Media |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Sedangkan bila video yang kalian punya tidak memiliki format seperti ketiga format di atas, maka kalian wajib menggantinya.
