Cara Menampilkan Video dengan HTML5

Logo HTML5     Pada beberapa tutorial sebelumnya SkripKu Dotkom pernah membahas salah satu fitur di HTML5 yaitu Cara Menampilkan Audio dengan HTML5. Nah, tutorial kali ini kita akan membahas Cara Menampilkan Video dengan HTML5.
     Seperti yang sudah dibahas di tutorial sebelumnya. Dengan menggunakan HTML5, untuk menampilkan audio/video kita membutuhkan lagi plugin tambahan seperti Flash atau semacamnya. Hampir sama dengan cara menampilkan audio, kita cukup menghafal 2 tag saja. Yaitu: <video> dan <source>. <video> untuk menunjukan bahwa kita akan menampilkan video dan <source> untuk mendefinisikan sumber/source file video-nya.
Oke, syntax paling umum-nya seperti ini gan:
Penjelasan:
  •  Tag <video>:Seperti yang dijelaskan pada pembukaan diatas, fungsi dari tag ini adalah untuk menunjukan bahwa kita akan menampilkan sebuah video dengan HTML5.
  • Atribut width="" : Untuk mengatur lebar video yang akan kita tampilkan.
  • Atribut height="" : Untuk mengatur tinggi video yang akan kita tampilkan.
  • Atribut controls : Untuk menampilkan Video Control seperti tombol Play, Pause, Volume, Full Screen, dan kontrol lainnya di video kita.
  • Tag <source>: Mendefinisakan source/sumber video yang akan kita tampilkan.
  • Atribut src="" : Untuk mengatur video yang akan ditampilkan. Silahkan isi dengan URL video kita.
  • Atribut type="" : Untuk mengatur type video yang akan ditampilkan. Untuk atribut ini kita harus menyesuaikan dengan jenis video yang kita panggi di atribut src="", silahkan lihat tabel dibawah:
Format File Nilai untuk atribut type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Contoh Penggunaan

 

     Pada contoh kali ini kita punya sebuah direktori yang berisi 2 file yaitu: file skripku.html dan sebuah video bernama UWATERE@Bazit.mp4, isi dari skripku.html adalah sebagai berikut: Jika semua sesuai prosedur dan file skripku.html tadi kita buka di browser yang sudah mendukung HTML5 seperti Firefox, Google Chrome, dan browser lainnya maka seharusnya akan muncul video yang tadi kita panggil:
Sedangkan teks yang berada diantara <video> dan </video> akan muncul ketika browser yang kita gunakan belum mendukung fitur ini. Untuk membuktikannya, silahkan buka dengan Internet Explorer yang jadul.

Ya, mungkin sekian sekilas tutorial yang bisa saya sampaikan. Untuk referensi yang lebih lengkap, temen-temen bisa buka: W3Schools - HTML5 Video. Setelah mengetahui fitur yang satu ini, semoga web yang kita buat bisa lebih efisien karena tidak usah menggunakan Plugin Eksternal lagi. Terima kasih atas kunjungannya, mohon maaf bila masih banyak kekurangan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..


EmoticonEmoticon