Membuat Multimedia Embedded Dengan HTML

Membuat Multimedia Embedded Dengan HTML

Pada HTML5 sudah muncul tag-tag yang dapat memutar multimedia pada browser melalui bahasa html, umumnya penggunaan multimedia berbasis video, audio, flash, java dan lain-lain, namun ada juga tag-tag multimedia yang telah dihapus yang dibuat khusus untuk aplikasi tertentu dan sudah diubah ke penggunaan aplikasi umumnya, Multimedia umumnya membutuhkan ruang penyimpanan untuk menyimpan berkas medianya selain itu pada database sudah didukung untuk menyimpan berkas pada tipe penyimpanan blob. Untuk lebih jelas akan saya jelaskan satu persatu media atau pembuatan playernya seperti dibawah ini.

Video

Video adalah sebuah media yang terkumpul didalamnya frame gambar-gambar yang diputar diatas 25 frame per detik yang akan menampilkan streaming sebuah dokumentasi, realita atau animasi 3D. Selain itu umumnya video yang diputar pada web disebut streaming video atau video player atau video sharing seperti youtube, vimeo atau dailymotion. Pada tag html video dapat diputar menggunakan tag video untuk player dan tag source untuk lokasi berkas video.

...
<video width="400" height="380" autoplay controls>
  <source src="videosaya.mp4" type="video/mp4">
  <source src="videosaya.ogg" type="video/ogg">
  <source src="videosaya.webm" type="video/webm">
  Browser tidak mendukung tag video
</video>
...

Audio

Audio adalah getaran dari sebuah benda yang menghasilkan sebuah bunyi atau suara yang dapat didengar oleh telinga kita, untuk menghasilkan bunyi getaran haruslah diatas 20 kali per detik. Untuk tag pada audio player pada web juga hampir sama dengan tag video yaitu tag audio dan tag source.

...
<audio autoplay controls>
  <source src="audiosaya.ogg" type="audio/ogg">
  <source src="audiosaya.mp3" type="audio/mpeg">
  <source src="audiosaya.wav" type="audio/wav">
  Browser ini tidak mendukung tag audio
</audio> 
...

Embed

Embed adalah sebuah tool yang digunakan untuk menjalankan sebuah aplikasi yang non-html untuk berjalan pada html seperti flash, java dan lain-lain. selain itu terdapat atribut width adalah ukuran lebar, height adalah ukuran tinggi/panjang, type adalah tipe file yang digunakan sesuai format dari IANA media types sedangkan src adalah source tempat berkas atau pemanggilan berkas aplikasi yang akan dijalankan, selain itu untuk menjalankan youtube juga menyediakan embed.

...
<embed src="aplikasiflash.swf" width="400" height="380" type="application/vnd.adobe.flash-movie"> 
...

Iframe

Iframe umumnya digunakan untuk menampilkan website lain kedalam html kita atau html lain kedalam html kita selain itu juga iframe digunakan untuk aplikasi web demo, statistik dan lain-lain.

...
<iframe src="http://www.codeberkas.xyz" width="300" height="240"></iframe> 
...

Gambar

Gambar adalah tiruan suatu benda yang diimplementasikan kedalam kertas atau media elektronik dengan cara dilukis menggunakan atau di rekam menggunakan kamera atau screenshot, pada html ada tag yang dapat menampilkan gambar yaitu tag img sedangkan tag figure dan figcaption adalah border bingkai dan judul sebuah foto/gambar.

...
<figure>
  <img src="fotopribadi.jpg" alt="T Ghazali" width="400" height="380">
  <figcaption>Gambar 1.1 Foto saya</figcaption>
</figure> 
...

Object

Object mempunyai fungsi yang hampir sama dengan embed dan iframe, namun object juga merupakan tag yang menampilkan seluruh media dan aplikasi seperti audio, flash, java applets, video, ActiveX dan PDF.

...
<object data="playerflash.swf" width="400" height="380" type="application/vnd.adobe.flash-movie"></object> 
...

 

Tags: , , ,