Cara Menampilkan Video dengan HTML5

Di era sekarang, informasi lebih mudah diterima melalui gambar bergerak atau video. Dari semua jenis file yang ada, video merupakan jenis file yang paling baik untuk menyampaikan informasi terutama di website. Dengan tampilan yang menarik, orang yang menonton akan merasa senang.

Namun sayangnya, beberapa web developer pemula biasanya keesulitan dalam menampilkan video pada websitenya. Biasanya karena mereka membatasi pemikiran sendiri bahwa menampilkan video harus menggunakan plugin javascript tambahan. Padahal, saat ini terdapat teknik HTML5 Video yang dapat menampilkan video dengan sederhana dan sangat mudah.

Mengenal HTML5 Video

HTML5 Video merupakan istilah yang digunakan untuk menampilkan video dengan menggunakan tag <video>, yang merupakan salah satu tag pada HTML5. Dengan tag <video> kita bisa menampilkan sebuat video hanya dengan 5 baris kode saja.

Jika Anda memang ingin menggunakan HTML5 Video ada baiknya Anda juga menggunakan deklarasi HTML5 dan elemen HTML5 lainnya sehingga dokumen HTML Anda valid HTML5. Berikut contoh penggunaan HTML5 Video.

<video width=”100%” height=”auto”>
<source src=”http://www.w3schools.com/html/mov_bbb.mp4” type=”video/mp4″ />
<source src=”http://www.w3schools.com/html/mov_bbb.ogg” type=”video/ogg” />
<source src=”http://www.w3schools.com/html/mov_bbb.webm” type=”video/webm” />
Your browser does not support HTML5 video.

Jika Anda ingin menampilkan video dengan HTML5 cukup salin kode diatas. Anda hanya perlu merubah url pada "src" dengan url video yang ingin ditampilkan. Anda juga harus mengetahui bahwa tampilan video yang menggunakan HTML5 itu berbeda-beda.

Browser Support

Tidak semua browser mendukung HTML5 Video. Disinilah kekurangannya, dibandingkan jikamenggunakan plugin javascript. Browser versi lama tidak mendukung tag <video> sehingga HTML5 Video tidak bisa diterapkan. Berikut versi browser yang mendukung HTML5 Video :

Element	Chrome	Internet Explorer	Firefox	Safari	Opera
<video>	4.0	9.0	3.5	4.0	10.5

Tag <video>, Child Tag dan Atributnya

Tipe File dan Dukungan Browser

Format file video untuk HTML5 video ada 3 jenis, yaitu .mp4, .ogg, dan .webm. Ketiga jenis file ini ada untuk masalah crossbrowser. Artinya, pada browser satu hanya jenis .mp4 yang didukung, sedangkan pada browser 2 hanya .ogg dan .webm yang didukung. Jadi, sebaiknya gunakan ketiga format tersebut sehingga bisa maksimal tampil di banyak browser.

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

Atribut dan Kontrol
Tag <video> mempunyai atribut tambahan untuk mengatur bagaimana video player berjalan. Misalnya, Anda ingin menampilkan video agar otomatis berjalan/play saat web dibuka, Anda cukup menambahkan atribut autoplay.

<video autoplay>
...
</video>

Untuk atribut lainnya, Anda bisa melihatnya di tabel berikut beserta kegunaannya.

Attribute	Value	Description
autoplay	Tidak harus diisi	Menentukan video agar otomatis berjalan saat web selesai dimuat/load.
controls	Tidak harus diisi	Menentukan agar kontrol (seperti tombol play/pause, atau progressbar) tampil.
height	pixels (ex. 300px)	Menentukan tinggi video player
loop	Tidak harus diisi	Menentukan agar video diulangi/dimainkan lagi secara terus menerus setelah selesai.
muted	Tidak harus diisi	Menentukan agar video tidak bersuara
poster	URL (ex.	Menentukan sumber file gambar yang tampil pada video player saat video tidak berjalan.
preload	auto metadata none	Menentukan bagaimana video seharusnya tampil sebelum di mainkan ketika website sudah dimuat.
src	URL (ex.	Menentukan sumber file video jika tidak menggunakan tag <source> didalamnya
width	pixels (ex. 300px)	Menentukan lebar video player

Itulah penjelasan bagaimana cara menampilkan video dengan menggunakan HTML5. Jika Anda masih bingung, silahkan baca referensi dari "www.w3schools.com/html/". Semoga bermanfaat.