7 Hal Yang Harus Diketahui Tentang HTML5 (Video)

HTML5 merupakan pengembangan spesifikasi terpanjang dari HTML yang pernah dibuat. Program ini menyentuh pada berbagai aspek desain web seperti navigasi, semantik, bentuk, dll. Namun keuntungan HTML5 yang utama adalah visibilitas cross-platform sebuah konten multimedia yang disebabkan oleh penolakan dari plugin milik pihak ke tiga dan API.

7 Hal Yang Harus Diketahui Tentang HTML5 (Video)

Sekarang dengan HTML5, kita tidak perlu lagi menggunakan plugin flash untuk memutar video pada sebuah website atau situs. Karena HTML5 dapat berjalan secara tersendiri di browser dengan cara tertanam pada <video> tag. Elemen markup memiliki kekhasan tersendiri, oleh karena itu seorang web desainer harus dapat memperhitungkan semua hal tersebut ketika memproyeksikan desain web mereka. Berikut ini adalah 7 hal yang harus diketahui tentang HTML5 (video).

1. HTML5 membutuhkan video format tertentu

Video HTML5 harus disajikan setidaknya dalam salah satu dari tiga format video yang direkomendasikan yaitu MP4, WebM atau OGG. Mungkin anda hanya dapat menggunakan format MP4 yang kini didukung oleh semua browser utama.

HTML5 membutuhkan video format tertentu

Namun anda harus memastikan bahwa MP4 video anda menggunakan kode H.264 dan audio codec AAC. Jika anda ingin menampilkan video di banyak browser, maka format video anda harus mencakup OGG atau WebM rendition.

Untuk mempersiapkan file video yang bisa digunakan pada web berbasis HTML5, anda dapat menggunakan Freemake Video Converter. Software Windows gratis ini dapat mengkonversi video untuk semua format yang kompatibel dengan HTML5. Atau anda dapat menggunakan Handbrake untuk mendapatkan file H.264 MP4. Tentu saja hal ini memberikan banyak pilihan dalam memilih format video.

2. Browser lama abaikan HTML5 (Video)

Untuk browser Internet Explorer versi lama (8.0 atau lebih rendah) tidak mendukung HTML5 <video> tag. Karena jumlah pengguna IE 6/7/8 masih banyak, anda harus sedikit berhati-hati dari pengunjung situs dan harus menyediakan flash fallback untuk video HTML5 anda. Hal ini dapat dilakukan dengan menggunakan <object> tag mengacu ke file SWF pihak ke tiga. Berikut ini contoh kode nya :

Browser lama abaikan HTML5 (video)

3. YouTube menawarkan format HTML5 secara default

Sejak Januari 2015, YouTube menyajikan video dalam format HTML5 secara default. Ini berarti anda dapat meng-upload video ke YouTube dan mengintegrasikannya ke situs anda melalui kode embed dan video dapat dimainkan di semua perangkat. Namun sebuah kelemahan dari YouTube adalah anda tidak dapat menghilangkan iklan yang telah melekat pada video tersebut.

YouTube menawarkan format HTML5 secara default

4. Controls, Autoplay, Loop, Muted

Video HTML5 menyediakan beberapa parameter yang dapat anda aktifkan atau dinonaktifkan dengan sederhana, yaitu dengan cara menambahkan atau menghilangkan atribut pada <video> tag.

Controls – digunakan untuk menampilkan kontrol video standar seperti Play, Pause, Volume.

Autoplay – membuat browser memutar video secara otomatis.

Loop – memberitahu atau memprogram browser untuk secara otomatis memutar ulang video.

Muted – mematikan suara audio pada video.

5. Keterangan dan teks

HTML5 menyediakan cara yang mudah untuk menanamkan teks pada video anda. <track> elemen menyediakan cara standar sederhana untuk menambahkan sub judul, keterangan, deskripsi pada layar dan chapters ke video anda. Ini adalah cara yang baik untuk meningkatkan aksesbilitas video dan memungkinkan untuk mesin pencari dapat memahami apa yang terdapat pada video. Berikut ini adalah contoh kode yang menunjukkan bagaimana <track> elemen digunakan :

Fungsi keterangan dan teks pada HTML5

6. Custom HTML5 video adalah player yang mahal

YouTube menyediakan fasilitas yang mudah untuk embeding video, tapi tidak ada pilihan untuk dapat melakukan kustomisasi pada video player tersebut. Jika anda menginginkan player yang sesuai dengan gaya perusahaan anda, anda harus memilih sebuah pemutar video HTML5 yang eksklusif. Dengan pemutar video yang premium anda dapat mengatur warna player, mengubah kontrol, menambahkan logo dan mengatur call-to-action pada video player anda. Namun, pilihan tersebut mulai dari harga USD$149 (JW Player) atau mungkin anda ingin menyajikan fasilitas streaming langsung dan anda harus siap membayar USD$1000 per bulan untuk Kaltura Video Player.

7. Interaktivitas Kanvas

Elemen video HTML5 dapat berinteraksi dengan elemen lain seperti <canvas> untuk memberikan pengalaman yang baru bagi pengunjung. Sebagai contoh anda dapat membuat video anda terlihat meledak ketika anda meng-klik sebuah tombol di atasnya atau anda dapat mengubah warna latar belakang halaman berdasarkan warna primer dalam video.

Interaktivitas kanvas HTML5

Silahkan baca juga artikel : Meningkatkan Kreativitas Dalam Mendesain Website

Semoga bermanfaat.