Datang lagi di mandankoding.com. Pada Tutorial HTML Dasar Sebelumnya kita sudah belajar cara menambahkan audio dengan HTML. kali ini kita akan belajar bagaimana cara menampilkan video dengan HTML.
Salah satu situs web populer yang menampilkan video adalah Youtube. Penyisipan video, audio, dan gambar ke dalam halaman web membuat situs web menjadi lebih informatif dan menarik.
Cara menampilkan video dengan HTML
Cara menampilkan video dengan HTML sangatlah mudah dan tidak jauh berbeda dengan cara menampilkan audio. perhatikan contoh berikut!
Sebelumnya, kamu siapkan terlebih dahulu video yang ingin di tampilkan. Di sini saya akan menampilkan video yang saya beri nama video.mp4.
Silahkan buat file baru tampil-video.html kemudian simpan file html dan file video tadi ke dalam satu folder yang kita beri nama HTML Video.
Kemudian silahkan tulisan code di bawah ini:
tampil-video.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML Video</title> </head> <body> <h1>Demo Menampilkan Video dengan HTML</h1> <video controls height="300" width="400"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video> </body> </html>
Jika code diatas dijalankan, maka hasilnya seperti berikut:
Kamu juga bisa menambahkan pesan “Tidak dapat memutar video! Format video tidak di dukung” di antara tag video tepatnya sebelum tag penutup untuk memberikan pesan bahwa jika format video yang ingin di tampilkan tidak di dukung oleh browser.
Format video yang di dukung oleh HTML:
| Format File | Type Media |
| mp4 | video/mp4 |
| webm | video/webm |
| ogg | video/ogg |
Atribut Video Pada HTML yang Umum Di gunakan.
1. Atribut control dan src
Atribut control mengaktifkan perintah seperti mengatur volume, pause, play, mute, dan stop. Sedangkan atribut src menunjukkan di mana lokasi file video di simpan.
Pada contoh sebelumnya kita langsung menuliskan nama file video.mp4 di dalam atribut src yang berarti file tampil-video.html yang memanggil video tersebut di simpan bersama-sama di dalam satu folder yang bernama HTML Video.
Bagaimana kalau kedua file tersebut di simpan di dalam folder yang berbeda?
Untuk penjelasan yang lebih lengkap silahkan kunjungi artikel berikut!
Cara memanggil file HTML di dalam direktori (folder) yang berbeda.
2. Atribut width dan height
Atribut height dan width di gunakan untuk mengatur ukuran lebar dan tinggi video:
<video controls autoplay height="400" width="500"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video> <video controls autoplay height="300" width="400"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video> <video controls autoplay height="200" width="300"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video>
Hasilnya seperti gambar di bawah ini:
3. Atribut autoplay
Atribut autoplay di gunakan untuk memutar video secara otomatis ketika halaman web pertama kali di muat.
<video controls autoplay height="300" width="400"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video>
Catatan:“Browser Chrome tidak mendukung pemutaran autoplay pada video” akan tetapi tetap mendukung pemutaran autoplay di barengi dengan muted. Terkadang pemutaran video secara autoplay membuat user/pengunjung web merasa terganggu.
4. Atribut autoplay muted
Atribut autoplay muted di gunakan untuk mejalankan video tanpa suara secara otomatis.
<video controls autoplay muted height="300" width="400"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video>
Jalankan code di atas dan perhatikan tampilan berikut!
5. Atribut loop
Atribut loop di gunakan untuk memutar ulang video secara otomatis (pemutaran secara berulang-ulang).
<video controls loop height="300" width="400"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video>
6. Atribut poster
Atribut poster di gunakan untuk menentukan cover/thumbnail dari video yang akan di tampilkan. Di sini saya akan menambahkan file baru yang bernama thumbnail.jpg ke dalam folder HTML video (di mana kita menyimpan file video.mp4 dan tampil-video.html).
<video controls height="300" width="400" poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> Tidak dapat memutar video! Format video tidak didukung </video>
Hasilnya seperti gambar di bawah ini:
Selamat mencoba🎉🎉
Tinggalkan Balasan