-->

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.

HTML 5 Video on browser

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.

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

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 :
ElementChromeInternet ExplorerFirefoxSafariOpera
<video>4.09.03.54.010.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.

BrowserMP4  WebMOgg
Internet ExplorerYES  NONO
ChromeYES  YESYES
FirefoxYES  YESYES
SafariYES  NONO
OperaYES (from Opera 25)  YESYES

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.

AttributeValueDescription
autoplayTidak harus diisiMenentukan video agar otomatis berjalan saat web selesai dimuat/load.
controlsTidak harus diisiMenentukan agar kontrol (seperti tombol play/pause, atau progressbar) tampil.
heightpixels (ex. 300px)Menentukan tinggi video player
loopTidak harus diisiMenentukan agar video diulangi/dimainkan lagi secara terus menerus setelah selesai.
mutedTidak harus diisiMenentukan agar video tidak bersuara
posterURL (ex. Menentukan sumber file gambar yang tampil pada video player saat video tidak berjalan.
preloadauto
metadata
none
Menentukan  bagaimana video seharusnya tampil sebelum di mainkan ketika website sudah dimuat.
srcURL (ex. Menentukan sumber file video jika tidak menggunakan tag <source> didalamnya
widthpixels (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.


0 Response to "Cara Menampilkan Video dengan HTML5"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel