HTML5 Audio & Video

HTML5 Audio & Video
March 20, 2014 mirzailhami

Semenjak munculnya teknologi HTML5, berbagai web aplikasi baru banyak bermunculan di internet. Karena memang HTML5 ini memiliki banyak sekali fitur, seperti Canvas, WebSocket, Geolocation, Web Storage, Audio & Video, dan masih banyak lagi.

html5-badge

Postingan kali ini akan membahas bagaimana menggunakan Audio & Video di web/blog. Teknologi Audio & Video sudah didukung pada browser Chrome versi 3.0 ke atas, Firefox versi 3.5 ke atas, Opera versi 10.5 ke atas dan Safari versi 3.2 ke atas.

Selain itu, juga didukung di smartphone. Sayangnya teknologi ini belum didukung di Internet Explorer.

Audio

HTML5 mendukung beberapa format file diantaranya adalah mp3 dan ogg. Untuk menggunakan pemutar mp3 dari HTML5 ini caranya cukup mudah, cukup menggunakan element <audio> saja.


 
Element audio memiliki beberapa atribut seperti autoplay, controls yang dapat digunakan untuk mengatur audio tersebut. Selengkapnya dapat dibaca di W3 Audio.

Video

Beberapa format video yang saat ini didukung oleh HTML5 adalah mp4, ogg dan ogv. Cara menggunakannya juga cukup mudah, hanya menggunakan element <video> saja.


 
Seperti pada audio, element video juga memiliki beberapa atribut seperti autoplay, controls, loop. Atribut ini dapat digunakan untuk mengatur video tersebut. Selengkapnya dapat dibaca di W3 Video.

Arahkan mouse pada video berikut. Video di bawah ini menggunakan atribut onmouseover dan onmouseout, sehingga video akan diputar ketika kursor mouse berada di atasnya dan pause ketika mouse keluar dari video.

Teknologi HTML5 Audio & Video ini masih terus dikembangkan oleh W3.org.

Baca juga: Mobile Emulator dengan Google Chrome