Home > Code, HTML, Tips > Memanfaatkan Tag Audio dan Video pada HTML5

Memanfaatkan Tag Audio dan Video pada HTML5

September 29, 2011 Leave a comment Go to comments

Kapan hari teman saya yang punya blog maruplayground tanya ke saya bagaimana melakukan embed file audio di wordpress biar gak perlu menggunakan youtube. Nah, disini saya mau ngebahas bagaimana caranya untuk membuat web yang bisa memutar lagu ataupun video, walaupun temen saya itu sekarang udah lebih jago dalam ngembed audio ama video. Mungkin masih ada beberapa orang yang belum tau tentang HTML5, dengan HTML5 kita dengan bisa dengan mudah memasukkan mp3 ataupun video ke web kita tanpa perlu membuat object terlebih dahulu dan tanpa menggunakan plugin. Di HTML5 ada tag baru yaitu <audio> dan <video>, mungkin bagi pengguna wordpress pernah pengalaman nulis blognya bukan di bagian Visual tapi di bagian HTML udah biasa ngeliat tanda “< >”, itu yang biasanya disebut tag.

Sayangnya HTML5 baru bisa dipakai di browser di versi yang terbaru, jadi browser yang versinya udah rada jadul ya tag baru yang di HTML5 gak keluar efeknya. Yang perlu diketahui lagi adalah gak semua format audio maupun video bisa diputer di suatu browser, untuk lebih jelasnya liat 2 tabel di bawah:

Buat yang audio:

Format

IE 9

Firefox 3.5

Opera 10.5

Chrome 3.0

Safari 3.0

mp3

Bisa

Tidak Bisa

Tidak Bisa

Bisa

Bisa

wav

Tidak Bisa

Bisa

Bisa

Bisa

Bisa

Buat yang video: (jika bisa akan ditulis versi minimalnya)

Format

IE

Firefox

Opera

Chrome

Safari

ogg

Tidak Bisa

3.5+

10.5+

5.0+

Tidak Bisa

mp4

9.0+

Tidak Bisa

Tidak Bisa

5.0+

3.0+

ogg = ogg files dengan Theora video codec dan Vorbis audio codec

mp4 = MPEG 4 files dengan H.264 video codec dan AAC audio code

Dari tabel di atas kita sadari bahwa bila kita menaruh file mp3 di web kita, akan ada beberapa orang yang membuka web kita kemudian tidak bisa memutar hasil embed mp3 kita. Misalnya ada seseorang yang menggunakan Firefox versi 3.5 kemudian membuka web kita yang melakukan embed mp3 dengan tag <audio>, maka pada firefox tersebut, mp3-nya tidak akan bisa diputar. Oh iya, karena disini saya pake wordpress gratisan, tentunya saya gak bisa upload mp3, jadi ngasih contohnya nulis di notepad aja. Trus dicoba dibuka pake chrome atau yang lainnya asalkan formatnya sesuai ama tabel di atas, cuman disini saya pake chrome soalnya dia bisa semua format.

AUDIO

<audio src = “Maroon 5 – She Will Be Loved.mp3” controls = “controls”>tulisan ini keluar jika browser tidak support HTML5</audio>

Ada baiknya pembaca mencoba mengetikkan baris code di atas ke notepad, jangan lupa untuk mengganti nama lagu yang di dalam tanda petik pertama dengan lagu yang emang mau diputer. Setelah ditulis di notepad, save file tersebut dengan format dot (.) html, misalnya “audio.html”. Kemudian copy lagu yang mau dipake ke folder tempat audio.html tadi di save. Nah abis itu coba buka file audio.html pake chrome, hasilnya kurang lebih akan seperti berikut ini:

Kalo kita pencet yang gambar segitiga (play), mp3 pun dapat kita dengarkan. Buat yang belum kenal HTML, di code sebelumnya ada tulisan “src” ama “controls”, bagian ini disebut attribute, yang kemudian diikuti tanda “=”, setelah tanda sama dengan (=), terdapat bagian yang diapit tanda petik, bagian tersebut disebut value. Pada tag <audio> ini ada berbagai attribute, yaitu sebagai berikut ini:

  1. autoplay, attribute autoplay memiliki value “autoplay”, sama seperti namanya, attribute ini berguna agar audio yang kita pakai langsung berjalan tanpa kita pencet play (atau tanda segitiga). Contoh codenya: <audio src = “Maroon 5 – She Will Be Loved.mp3” controls = “controls” autoplay=”autoplay”></audio>
  2. controls, attribute ini memiliki value “controls”, dan sebelumnya attribute ini sudah digunakan, jika tidak maka tampilan untuk tombol play serta volume tidak keluar, sehingga orang yang buka web gak bisa melakukan stop ataupun pause, lumayan buat maksain orang dengerin lagu yang kita suka buat orang2 yang buka web kita
  3. loop, attribute ini memiliki value “loop”, sama seperti namanya attribute ini berguna agar pada saat lagu pada audio selesai secara otomatis akan diulang kembali, contoh codenya: <audio src = “Maroon 5 – She Will Be Loved.mp3″ loop=”loop” autoplay=”autoplay”></audio>, kalo pake code ini yang buka web gak bisa ngeberhentiin lagu, udah gitu begitu lagunya abis bakal diputer lagi
  4. preload, attribute ini memiliki value “preload”, buat ngeload audio ketika page dibuka, gampangnya attribute ini kebalikan dari autoplay
  5. src, attribute ini adalah attribute terpenting, valuenya adalah file audio tersebut berserta lokasi filenya (bisa url), kalo di code sebelumnya cuman ditulis langsung nama file-nya berarti letak file audio sama dengan letak file html-nya, misalnya bila kita menggunakan wordpress yang hostingan sendiri maka value pada src adalah “wp-content/uploads/Maroon 5 – She Will Be Loved.mp3”, contoh lainnya misal “/usr/home/johan/Maroon 5 – She Will Be Loved.mp3”

VIDEO

Contoh embed video yang sederhana hanya perlu ditambahkan code sebagai berikut ini:

<video src=”panda.mp4″ controls=”controls”>tulisan ini keluar jika browser tidak support HTML5</video>

Tulis code di atas pake notepad, ganti nama file video yang kita punya, save misal dengan nama “audio.html”, copy video yang dipilih ke folder yang sama. Hasilnya ketika kita buka di chrome:

Sama seperti tag <audio>, pada tag <video> juga memiliki beberapa attribute seperti yang berikut ini:

  1. audio, attribute ini memiliki value “muted”, jika digunakan maka video tidak akan mengeluarkan suara
  2. autoplay, attribute yang sama seperti pada <audio>, value-nya “autoplay”
  3. controls, fungsinya sama seperti pada tag <audio>
  4. loop, sama seperti pada tag <audio>
  5. preload, sama seperti pada tag <audio>
  6. src, sama seperti pada tag <audio>
  7. width, value-nya adalah angka yang menentukan lebar dari video, satuannya pixel
  8. height, sama seperti width, hanya saja untuk mengatur tinggi dari video, contoh penggunaanya <video src=”panda.mp4″ controls=”controls” width=”320″ height=”240″></video>

Sebenarnya saya ingin mencobanya langsung di blog ini, cuman karena ya itu tadi, wordpress gratisan jadi tak mampu untuk upload mp3 ataupun video. Sumber postingan serta buat yang mau informasi tambahan barangkali belum jelas bisa buka www.w3schools.com/html5/default.asp. Semoga postingan singkat ini bermanfaat😀

Categories: Code, HTML, Tips
  1. September 30, 2011 at 5:56 pm

    kayaknya aku batalin niat buat upload mp3 di wordpress, ntar kena undang-undang piracy, jadi serem, hoho..

  2. October 1, 2011 at 1:15 am

    bukannya yg penting gak dibagi2 ya? eh tp bisa aja sih ntar didonlot mp3 nya

  3. rozi
    January 29, 2013 at 11:15 am

    thanks broo sangat membantu…

    • January 29, 2013 at 6:31 pm

      sama2 bro

  4. aditya
    October 13, 2014 at 1:29 am

    Kalo buat lagux gk berhenti sampai page yg laen apa codingx?

  5. August 16, 2015 at 4:40 pm

    Berbagi Hasil Pekerjaan Tugas –> CARA MEMUTAR VIDEO DENGAN HTML5

  6. angga
    November 24, 2015 at 7:53 am

    thanks gan mantap (y)

  7. Putra Zeus
    June 8, 2016 at 1:37 am

    kenapa ketika di buka di browser hp tidak bisa autoplay ya….mohon pencerahannya..

  8. dicki
    November 4, 2016 at 11:15 am

    Gan kalo mau bisa buka video ekstensi MKV gimana ya?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: