Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Menampilkan Video & Audio Dengan HTML5

HTML5 memungkinkan kita menambahkan video tanpa menggunakan bantuan flash. Dengan menggunakan tag <video>, kita dapat langsung menampilkan video tanpa bantuan plugin. Jadi website kita lebih cepat diakses karena meminimalisir adanya plugin dengan tag-tag baru yang ditawarkan HTML5. Untuk contohnya bisa anda lihat video dibawah ini.

Cara penggunaan tag ini bisa anda ketikkan tag HTML5 dibawah ini.

<section style="text-align:center">
        <button onclick="playPause()">Play / Pause</button>
       <button onclick="makeBig()">Besarkan Layar</button>
       <button onclick="makeNormal()">Dll</button>
       <button onclick="makeSmall()">Dll</button>
        <br />
        <video id="test">
                  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
                  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
     </video>
  </section>

<script type="text/javascript">
var myVideo=document.getElementById("test");
function playPause()
{
  if (myVideo.paused)
     myVideo.play();
 else
        myVideo.pause();
}
function makeBig()
{
    myVideo.width=840;
}
function makeNormal()
{
   myVideo.width=540;
}
function makeSmall()
{
    myVideo.width=340;
}
</script>

Mudah bukan, selain tag <video>, ada juga tag <audio> yang berfungsi untuk menampilkan mp3 player.

Penggunaannya sama saja dengan mengetikkan tag audio seperti yang saya ketikkan dibawah ini.

<section style="text-align:center"><audio controls>
  <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Browser kamu ga ngedukung nih :(
</audio></section>

Setelah artikel tentang Tag video dan audio ini, saya akan lanjutkan dengan tag canvas HTML5 yang sangat wahhh. Tunggu kelanjutannya yah :)

64 Comments

  1. Rahasia Hidup SehatReply

    bikin berat loading nggak yah mas, makasih buat tutorialnya sangat bermanfaat :)

    • Nurul ImamReply

      Gak kok mas, malah yang bikin berat itu klo make plugin flash buat playernya

      • JenivReply

        Iya lebih baik menggunakan tag HTML5 daripada flash, memang HTML5 dikembangkan agar memudahkan penggunaan multimedia dalam web. :D Hehehehe

        • Nurul ImamReply

          Betul bangettt… Makanya sekarang sudah banyak yang tidak menggunakan plugin flash dan menggantikannya dengan HTML5 seperti audio, video, bahkan animasi dengan paduan canvas html5, css3, dan javascript.

          • heri

            mas klow ngambil dari folder kita audio misal difolder c gitu waktu di browser bisa cman waktu dilinkngin gk bisa di puter

  2. AgriReply

    Mantab mas,, ilmu baru lagi #horeee :D

    • Nurul ImamReply

      Girang bener mas, padahal itu ilmu lama lho :D

  3. PakiesReply

    manteb dapat ilmu baru nih Kang. Ijin tak copy biar enteng di loading

    • Nurul ImamReply

      Silahkan kang pakies :)

  4. Index ApkReply

    trus cara masukin video or audionya gimana mas imam???

    • QyReply

      Sama dengan yang diatas,masukin video-nya bmna ? ._.

      • Nurul ImamReply

        Tinggal upload videonya, lalu masukin urlnya ke dalam tag html5 tadi :)

  5. IKblogReply

    Format video n audio yang support HTML5 apa aja Mas? Kalo audio keliatan *.ogg sama *.mp3, nah itu yg script video ga ada source videonya Mas?

    • Nurul ImamReply

      Oia itu didalam contoh tidak ada videonya yah :D

      <video controls="" height="240" width="320"><br>
        <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"><br>
        <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"><br>
      Browser kamu ga ngedukung nih :(
      </video>
  6. cory senjayaReply

    ihh mantap kali nih … wajib di coba … makasih banyak ilmunya ini super sangat bermanfaat ^_^’d

    • Nurul ImamReply

      Silahkan dicoba mas ;)

      • cory senjayaReply

        wah, sejak kapan saya ganti gender … hehehe …
        sip2.

        • Nurul ImamReply

          Abis ga ada fotonya sih, untung aja gravatarnya bukan monster :p

  7. Mizz AizaReply

    menarik jika dapat masukkan video begini.. banyak yang saya kurang faham mengenai html 5 ini..

    • Nurul ImamReply

      Semoga tambah paham dikit-dikit meskipun hanya fitur-fitur html5nya saja

  8. Juragan TeknologiReply

    wahhh ribet jugaaa yaaa… :D

    • Nurul ImamReply

      Ribet klo gak baca artikelnya :D

  9. Valentino FebrianReply

    Mantap mas..pke html5 jga bsa ya

    • Nurul ImamReply

      Bisa donk, apasih yang gak bisa dengan html5 :D

  10. Bisnis InternetReply

    Mantap ilmunya kang..

    Jago bener ente koding

    • Nurul ImamReply

      Gak juga mas, cuma copy paste kok :p

  11. NewbieReply

    maaf mas saya masih awam/Newbie…. gini gan yg di maksud dari kata2 yg diatas tadi itu yg HTML5 itu apakah templeat bloknya harus html5 dulu atau gmn mohon penjelasannya maaf saya ganggu hehehe

    • Nurul ImamReply

      Memang benar sekali, doctype harus memakai html5 :)

  12. HarddayReply

    kenapa videonya gak bisa tampil ketika diganti dengan bentuk video yang lain,,,, berbunyi bisa, v tampilnya yang gk pernah bisa….. infonya gan

    • Nurul ImamReply

      Harus dukung codecnya, untuk menamahkan codecnya liat di w3c aja :)

  13. KhadijahReply

    maaf, gimana caranya saat text disorot audionya bisa langsung main?

    • Nurul ImamReply

      on-text-load

  14. DefransReply

    waw hebat nih ilmu nya.,
    kereeennn…,
    mas tempat buat naruh script nya tuh dimana nya.?
    di head ato di body?

    kalo bisa contoh nya di buatin secara lengkap ya.?
    maklum newbie.. :D

    hehehe

    • Nurul ImamReply

      d body, klo di head tidak di render halamannya
      Lho kan diatas sudah lengkap

  15. LindaReply

    Kak, saya coba copas kok yang muncul cuma suaranya? gambarnya tidak mau muncul? minta bantuannya donk…:-)

    • Nurul ImamReply

      Lha klo audio memang ga ada gambarnya, klo video ada gambarnya
      Mungkin format videonya tidak didukung kali :)

  16. fikReply

    mas kalo mau nampilin lagu nya secara otomatis saat web di buka bisa nggak ya?

    • Nurul ImamReply

      Autoplay bisa kok :)

  17. ichsanReply

    bagaimana caranya supaya ada 2 video bisa terputar secara bersamaan..

    kan klw script di atas hanya bisa 1 video..

    • Nurul ImamReply

      Bisa kok, tinggal dipasang 2 aja mas :)

  18. audio hajiReply

    ok gan, tq

    • Nurul ImamReply

      Iya sama-sama

  19. EkaReply

    ijin copy ya mas codingnya.. :)

    • Nurul ImamReply

      Silahkan :)

      • elyasReply

        mas…kalau source videonya di folder kita gimana ya mas menulis scripnya..
        matur nuwun salam kenal dari elyas

  20. RiskyReply

    akang ane baru balajar .. klo mau nampilin video kek di atas . tapi pas diliat di browser kata ne “no video with supported format and MME type found” .
    padahal ane udah coba pake segala browser + segala versi .
    mohon bimbingannya mastelll !!

    • Nurul ImamReply

      Format video tidak didukung, mungkin bisa dicoba video format mp4 / ogg

  21. madaReply

    biar gx autostart gmna mas???

  22. KucingReply

    Mas aku ganteng ga

  23. sultonReply

    klo memasang radio streaming dr listen2myradio.com, bagaimana caranya mas ?

  24. IskandarReply

    cara agar video diputar secara random dari banyak video ada tutorialnya gak mas????

  25. muhsyahrulReply

    mas cara buat blog kyk mp3 skuLl gmna ya? :D Tolong di jawab, makasih

  26. BorifReply

    wah bagus tuh,, tapi sayamah bingung ntu teh d masukin d HTML tamplate atw d mna y….?!! hehehe maklum newbie….

  27. ikhsan asharReply

    Mas Imam,, narok script ini di mana ya?? kok pas di tarok gambar videonya hilang..?? mohon bantuannya. trimakasih

  28. PutraReply

    Browser kamu ga ngedukung nih :(

    narok script video controls nya dimana ya mas?? kok pas di masukkin gambar video nya hilang,, tpi pas di play suaranya doang yg muncul.

  29. amandaReply

    makasih mas. sangat membantu :D

  30. benjoReply

    Berarti kalo pake html5 gak usah databse ya ms?

  31. Wiky MoviesReply

    Min tau cara biar gk muncul IDM download nya? maksudnya saya mau buat blog streaming, tapi biar gk bisa di download, cuma streaming doang… mungkin ad script2 nya??? makasi…

  32. MiezReply

    mantap bang, terima kasih sudah mau berbagi.

  33. YudaReply

    Makasih min buat info nya :)
    Sangat berguna sekali …

  34. herlambangReply

    videonya bisa responsive juga ga mas ?

  35. mevidReply

    udah saya coba mas alhasil monggo di lihat http://www.mevid.xyz

  36. Myscript2010Reply

    Code Pemutar Video is good
    izi numpang share Oom..

  37. David MfcReply

    mas, gmna ya coding nya supaya video yang dari database dapat diputar di web kita?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>