Untuk memasang file video ke halaman HTML kita akan gunakan Tag<video> dan tentu saja menggunakan atribut "src" untuk mencari file videonya.
dalam tag <video> terdapat juga atribut-atribut yang sama seperti tag<audio> dengan fungsi yang sama juga, yaitu atribut controls, autoplay, loop, mute, dan preload.
seperti ini contoh penulisannya:
<video src="video_01.mp4" controls> </video>
<video src="video_01.mp4" autoplay controls> </video>
<video src="video_01.mp4" loop controls> </video>
<video src="video_01.mp4" controls mute preload> </video>
dari semua contoh saya gunakan atribut controls agar video memiliki tombol kontrol seperti play/stop, volume, dan lainnya.
Selain atribut diatas, Tag<video> juga memiliki atribut width dan height yang berfungsi untuk mengatur lebar dan tinggi tampilan video, namun web browser akan tetap mempertahankan rasio dari video.
Jadi sebaiknya anda gunakan atribut width saja, karena web browser akan menyesuaikan tinggi tampilan secara otomatis.
beerikut contohnya:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar memasang video di HTML</title>
</head>
<body>
<h1>Memasang video di halaman web</h1>
<p>Contoh penggunaan atribut width dan height pada tag video</p>
<video src="video_01.mp4" controls width="200" height="300"></video><br>
<p>Contoh penggunaan atribut width saja pada tag video</p>
<video src="video_01.mp4" controls width="200"></video>
</body>
</html>
Hasilnya seperti ini:
Selain itu, tag video juga menyediakan atribut poster untuk memberi efek placeholder ataupun gambar tampilan pada video.
contohnya seperti ini:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar memasang video di HTML</title>
</head>
<body>
<h1>Memasang video di halaman web</h1>
<p>Contoh penggunaan atribut poster pada tag video</p>
<video src="video_01.mp4" controls width="400" poster="cnc q2.jpg"></video>
</body>
</html>
Hasilnya seperti ini:
Sekian untuk pembahasan kali ini, kita akan lanjutkan pada tutorial berikutnya.
Selalu yang ingin saya katakan, "Tetap semangaaaat yaaaa dapetin si DIA !!!!" :)))
Adding videos to an HTML page is an important aspect of web design. I benefit from reading this blog
ReplyDelete