Belajar Web – Cara Menampilkan Video pada HTML 5

Salah satu keunggulan yang diusung oleh HTML 5 adalah kemudahan untuk menampilkan file Video pada halaman Web tanpa harus menggunakan Plugin Khusus atau plugin tambahan seperti Flash. Tetapi cukup hanya dengan menggunakan element yang ada. Element yang dimaksud adalah element <video>.

Sebelum mencobanya, ada beberapa hal yang perlu diketahui :

1. Hampir semua web browser sudah mendukung penggunakan HMTL5. Jadi install-lah terlebih dahulu salah satu web browser yang menjadi favorit anda. Disarankan menggunakan Google Chrome.

2. Format file video yang didukung oleh HTML5 adalah berformat .mp4, .oog dan .WebM.

Adapun cara menuliskannya adalah sbb :

<video width="320" height="240" controls> 
  <source src="video_anda.mp4" type="video/mp4"> 
  <source src="video_anda.ogg" type="video/ogg"> 
</video>

Untuk melengkapi penggunaan element, anda dapat menambahkan beberapa properties :

• width=”dalam pixel” (Untuk Menentukan lebar video)
• height=”dalam pixel” (Untuk Menentukan tinggi video)
• controls=”controls” (Untuk Menampilkan tombol kontrol video)
• autoplay=”autoplay” (Untuk Memutar video secara otomatis)
• loop=”loop” (Untuk Mengulangi pemutaran video terus menerus)
• muted=”muted” (Untuk Menghilangkan Output SUara pada Video)
• poster=”URL” (Untuk menampilkan gambar awal sebelum video diputar)
• Keterangan lebih lengkapnya bisa dibaca di http://www.w3schools.com/tags/ref_av_dom.asp

Sehingga penulisan tag HTML nya bisa seperti dibawah ini :

<video width="320" height="240" autoplay=”autoplay” controls=”controls” poster=”cover.jpg” loop=”loop”>
  <source src="video_anda.mp4" type="video/mp4">
  <source src="video_anda.ogg" type="video/ogg">
</video>

PREVIEW