Kode Program · 1/20/2026
Program HTML dengan Video Tag
Hello guys! Berjumpa dengan Miniblog dari Inzaghi's Blog! Dalam Pemrograman Web Dasar diperlukan yang namanya HTML agar membuat Halaman Web lebih terstruktur. Inilah Program HTML dengan menggunakan Video Tag, untuk menampilkan Video.
Sumber : Simplilearn.com dan Geeksforgeeks.org
Elemen <video> dalam HTML digunakan untuk menampilkan konten video di halaman web. Elemen ini mendukung berbagai format video seperti MP4, WebM, dan Ogg, serta mulai diperkenalkan sejak HTML5.
Silakan gulir ke bagian paling bawah halaman. Di sana tersedia video tutorial yang berfungsi sebagai contoh langsung penggunaan elemen <video> dan memperlihatkan bagaimana video ditampilkan pada halaman web ini.
Sintaks :
<video src="" controls> </video>
atau
<video controls="controls">
<source src="video_filename" type="video_type">
</video>Secara umum, kita lebih menyukai sintaks dengan tag <source> yang dibungkus di antara tag video karena :
- Ini memungkinkan Anda untuk menentukan beberapa elemen <source> untuk format video yang berbeda (misalnya, MP4, WebM, Ogg), meningkatkan kompatibilitas lintas browser.
- Dengan menyertakan atribut type, Anda dapat memberi tahu browser tipe MIME yang tepat dari file video, membantunya menentukan apakah file tersebut dapat diputar.
Atribut Utama Elemen <video>
Atribut berikut dapat digunakan dengan tag <video> untuk meningkatkan pemutaran video :
|
Atribut
|
Deskripsi
|
|
controls
|
Menambahkan
kontrol pemutaran seperti putar, jeda, volume, dll.
|
|
width
|
Menentukan lebar
pemutar video.
|
|
height
|
Menentukan
tinggi pemutar video.
|
|
autoplay
|
Secara otomatis
mulai memutar video saat dimuat.
|
|
muted
|
Secara default
membisukan video.
|
|
src
|
Menentukan jalur
file video.
|
|
type
|
Menentukan
format video (misalnya, video/mp4, video/webm).
|
Berikut adalah contoh penggunaan berbagai Atribut Tag Video :
<html><body><video controls="" height="240" width="320"><source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"/>Sample Video</video></body></html>
- Tag <video> mendefinisikan pemutar video, dengan atribut width dan height yang mengatur dimensinya.
- Atribut controls menambahkan kontrol pemutaran seperti putar, jeda, dan volume.
Format yang Didukung
Tiga format berbeda umumnya didukung oleh peramban web - mp4, Ogg, dan WebM. Tabel di bawah ini mencantumkan format yang didukung oleh berbagai peramban :
|
Browser
|
MP4
|
WebM
|
OGG
|
|
Google Chrome
|
Ya
|
Ya
|
Ya
|
|
Internet Explorer
|
Ya
|
Tidak
|
Tidak
|
|
Firefox
|
Ya
|
Ya
|
Ya
|
|
Opera
|
Ya
|
Ya
|
Ya
|
|
Safari
|
Ya
|
Ya
|
Tidak
|
Contoh 1 :
<!DOCTYPE html><html><head><style>video {max-width: 100%;height: auto;display: block;margin: 0 auto;}</style></head><body><video controls="" poster="https://via.placeholder.com/640x360.png?text=Video+Loading"><source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"/></video></body></html>
Hasil Output :
Penjelasan :
- Video tersebut dibuat responsif dengan CSS, menyesuaikan lebarnya menjadi 100% dari wadahnya sambil mempertahankan rasio aspek.
- Atribut poster menampilkan gambar placeholder sebelum video dimuat atau diputar, sehingga meningkatkan pengalaman pengguna.
Contoh 2 :
<html><head><style>video {width: 640px;height: 360px;border: 2px solid #4CAF50;border-radius: 8px;background-color: #000;}</style></head><body><video autoplay="" controls="" loop="" muted=""><source src="https://media.geeksforgeeks.org/wp-content/uploads/20241202174008478068/sample-vedio.mp4" type="video/mp4"/></video></body></html>
Hasil Output :
Penjelasan :
- Video tersebut diberi sentuhan gaya dengan bingkai hijau, sudut membulat, dan latar belakang hitam untuk meningkatkan penampilannya.
- Atribut putar otomatis, putar ulang, dan bisu memastikan video diputar secara otomatis, diulang tanpa batas, dan dimulai tanpa suara.
Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png&w=3840&q=75)