Cara menggunakan html 5 adalah

Penggunaan file multimedia dalam sebuah website merupakan hal yang lumrah untuk memperkaya informasi dan meningkatkan interaktivitas. Dari semua file multimedia yang ada, video adalah jenis file terbaik untuk menyampaikan informasi di website

Sayangnya, beberapa web developer pemula biasanya kesulitan menampilkan video di website. Biasanya hal ini dikarenakan keterbatasan diri berpikir bahwa menampilkan video harus menggunakan tambahan plugin javascript

Bahkan, saat ini sudah ada teknik Video HTML5 yang bisa menampilkan video secara simpel dan super mudah

Posting Daftar Isi

Kenali Video HTML5

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 video HTML5, Anda juga harus menggunakan deklarasi HTML5 dan elemen HTML5 lainnya sehingga dokumen HTML Anda adalah HTML5 yang valid

Contoh

Jika Anda ingin melihat cara kerja video HTML5, silakan lihat contoh di bawah ini

//www.w3schools.com/html/mov_bbb.mp4” type=”video/mp4″ />
//www.w3schools.com/html/mov_bbb.ogg” type=”video/ogg” />
//www.w3schools.com/html/mov_bbb.webm” type=”video/webm” />
Browser Anda tidak mendukung video HTML5

Browser Anda tidak mendukung video HTML5

Jadi, jika ingin menampilkan video dengan html5, salin saja kode di atas. Yang perlu Anda ubah adalah url ke file video, yang saya beri warna merah

Perlu Anda ketahui bahwa pada setiap browser, tampilan pemutar video HTML5 berbeda-beda, seperti gambar di bawah ini

Dukungan Peramban

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.5

Tag , Child tag dan atributnya

Jenis file dan dukungan browser

Ada 3 jenis format file video untuk video HTML5 yaitu. mp4,. ogg, dan. webm. Ketiga jenis file ini ada untuk masalah crossbrowser. Artinya, di browser hanya ada satu jenis. mp4 yang didukung, sedangkan di browser 2 saja. ogg dan. didukung webm. Nah, sebaiknya gunakan ketiga format tersebut agar bisa maksimal ditampilkan di banyak browser

Silakan lihat tabel di bawah untuk dukungan browser untuk format video yang lebih jelas

BrowserMP4WebMOggInternet ExplorerYASNONOChromeYESYESYESFirfoxYAYESYESafariYASNONOOoperaYES (dari Opera 25)YESYES

Atribut 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 autoplay seperti di bawah.

autoplay>
…

Untuk atribut lainnya, Anda dapat melihatnya pada tabel berikut. Untuk contoh dan detail, silakan klik nama atribut

AttributeValueDescriptionautoplayTidak harus diisi. Menentukan video untuk diputar secara otomatis saat web selesai dimuat. kontrolTidak boleh diisi Menentukan bahwa kontrol (seperti tombol putar/jeda, atau bilah kemajuan) muncul. piksel tinggi (mis. 300px) Menentukan tinggi loop pemutar video Tidak boleh diisi Menentukan bahwa video diulang/diputar lagi terus menerus setelah selesai. dibisukanTidak boleh diisi Menentukan bahwa video dibisukan posterURL (mis. Menentukan sumber file gambar yang muncul di pemutar video saat video tidak berjalan. preloadauto
metadata
noneMenentukan  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 player

 

Yap, itulah penjelasan cara menampilkan video dengan HTML5. Selamat mencoba dan semoga bermanfaat

Bagaimana cara menggunakan HTML?

Apa yang dimulai dengan HTML5?

Apa yang dilakukan HTML5?

Apakah HTML dan HTML5 sama?