Cara Menampilkan Video Dengan HTML5 Langkah Konfigurasinya

Last updated on Juli 11th, Penggunaan file multimedia dalam sebuah website merupakan hal yang biasa untuk memperkaya informasi dan meningkatkan ke-interaktif-an. Dari semua file multimedia yang ada, video merupakan jenis file yang paling baik untuk menyampaikan informasi pada website.

Sayangnya, beberapa web developer pemula biasanya kesulitan dalam menampilkan video pada website. Biasanya, ini karena membatasi pemikiran sendiri bahwa menampilkan video harus menggunakan plugin javacript tambahan.

Padahal, saat ini sudah terdapat teknik HTML5 Video yang dapat menampilkan video dengan sederhana dan super mudah.

Mengenal HTML5 Video
HTML5 video adalah istilah yang digunakan untuk menampilkan video dengan menggunakan tag , yang mana merupakan salah satu tag HTML5. Dengan adanya tag , kita bisa menampilkan sebuah video hanya dengan 5 baris kode saja.

Jika anda menggunakan HTML5 video, sebaiknya anda juga menggunakan deklarasi HTML5 dan elemen-elemen HTML5 lainnya sehingga dokumen HTML anda valid HTML5.

Contoh
Jika anda ingin melihat bagaimana HTML5 video bekerja, silahkan lihat contoh dibawah ini.

/html/mov_bbb.mp4” type=”video/mp4″ />
/html/mov_bbb.ogg” type=”video/ogg” />
/html/mov_bbb.webm” type=”video/webm” />
Your browser does not support HTML5 video.

Your browser does not support HTML5 video.

Jadi, jika anda ingin menampilkan video dengan html5, cukup salin kode di atas. Yang perlu anda ganti adalah url ke file videonya, yang saya warnai dengan warna merah.

Perlu anda ketahui bahwa pada setiap browser, tampilan video player HTML5 ini berbeda-beda, seperti di bawah ini.

Browser Support
Tidak semua browser mendukung tag . Yaa, inilah kekurangan HTML5 video jika dibandingkan dengan video dengan plugin javascript. Browser-browser versi lama, tidak mendukung tag sehingga HTML5 video tidak bisa diterapkan. Untuk lebih detailnya silahkan lihat tabel di bawah ini.

ElementChromeInternet ExplorerFirefoxSafariOpera4.09.03.54.010.5Tag , Child tag dan atributnya
Tipe File dan dukungan browsernya
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.

Silahkan lihat tabel di bawah ini untuk dukungan browser untuk format video tersebut yang lebih jelas.

BrowserMP4WebMOggInternet ExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYES (from Opera 25)YESYESAtribut dan Kontrol
Tag mempunyai atribut-atribut untuk mengatur bagaimana video player tampil. Misalnya, anda bisa menampilkan video agar otomatis berjalan/play saat web dibuka dengan menambahkan atribut autoplayseperti di bawah.

Untuk atribut lain, anda bisa melihatnya pada tabel berikut ini. Untuk contoh dan detailnya, silahkan klik nama atributnya.

AttributeValueDescriptionautoplayTidak 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 playerloopTidak harus diisiMenentukan agar video diulangi/dimainkan lagi secara terus menerus setelah selesai.mutedTidak harus diisiMenentukan agar video tidak bersuaraposterURL (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 didalamnyawidthpixels (ex. 300px)Menentukan lebar video playerYap, itulah penjelasan bagaimana menampilkan video dengan HTML5. Selamat mencoba dan semoga bermanfaat.

Referensi :
–/html/html5_video.asp
– /tags/tag_video.asp

~Muhammad Syakirurohman~