Langsung ke konten utama

MEMUTAR AUDIO DAN VIDEO DENGAN HTML5


Pada postingan kali ini kita akan membahas mengenai HTML5 yang digunakan untuk memutar Audio dan Video. Sebab pada versi HTML sebelumnya fitur tersebut tidak bisa kita jumpai, jadi kali ini kita akan bahas mengenai fitur tersebut!

Pada versi sebelumnya untuk menampilkan/memutar video dan audio, kita bisa menggunakan <embed></embed> yang penulisan lengkapnya sangatlah panjang. Namun kali ini kita gunakan tag <audio></audio> untuk audio dan <video></video> untuk menampilkan/memutar video.

Format dasar penulisannya seperti berikut ini :

Audio 

<audio controls="controls">
<source src="nama lagu.mp3" type="audio/mp3">
</audio>

sedangkan untuk Video ada 3 cara berdasar 3 format video yang di dukung oleh HTML5 yaitu ogg, webm, dan mp4 :

<video controls="controls">
<source src="Nama Video.mp4" type="video/mp4">
</video>


<video controls="controls">
<source src="Nama Video.webm" type="video/webm">
</video>


<video controls="controls">
<source src="Nama Video.ogg" type="video/ogg">
</video>

Nah, jika video yang Anda miliki tidak ada yang sesuai/sama dengan ketiga format tersebut, ada baiknya sebelum memutar atau menguploadnya terlebih dahulu Anda men-convertnya ke salah satu format yang didukung di atas. Oh ya, Anda juga bisa menentukan lebar dan tinggi dari video yang ditampilkan dengan menambahkan attribut width dan height.

Dibawah ini adalah keterangan Format Video yang disupport oleh HTML5 :
  • Ogg = File Ogg dengan Video Codec Theora dan Audio Codec Vorbis.
  • MPEG4 = file MPEG 4 dengan Video Codec H.264 dan Audio Codec AAC.
  • WebM = file WebM dengan Video Codec VP8 dan Audio Codec Vorbis.


Kelemahan dari HTML5 ini adalah belum semua web browser mendukung adanya HTML5. Jika Anda ingin mencobanya, lihat versi web browser Anda, jika lebih tinggi atau sama dengan versi dibawah ini maka Anda bisa mencobanya pada browser Anda.

Web Browser Support HTML5 :
  • Internet Explorer (IE) versi 9.0+
  • Firefox versi 3.5+
  • Opera versi 10.5+
  • Google Chrome versi 5.0+
  • Safari versi 3.0+

Berikut tampilan audio dari script tersebut :

MEMUTAR AUDIO DAN VIDEO DENGAN HTML5
Audio Dengan HTML5

Dan ini tampilan video dari script tersebut :

MEMUTAR AUDIO DAN VIDEO DENGAN HTML5
Video Dengan HTML5

Label:

Komentar

  1. Fittra Ferdiansyah2 Agustus 2016 pukul 05.04

    makasih om!!!

    BalasHapus
  2. Unknown2 Agustus 2016 pukul 15.38

    lanjut gan ..

    BalasHapus
  3. Wirawan Prasetyo2 Agustus 2016 pukul 15.56

    membantu kita nih

    BalasHapus
  4. Unknown2 Agustus 2016 pukul 16.20

    Nice Post gan, Ijin nyoba dulu..

    BalasHapus
  5. Edi Nugroho2 Agustus 2016 pukul 16.24

    ijin coba gan

    BalasHapus
  6. Ikut Pintar2 Agustus 2016 pukul 16.28

    manteb gan izin coba...

    BalasHapus
  7. Anonim2 Agustus 2016 pukul 16.36

    izin mencoba gan , nice info

    BalasHapus
  8. Unknown2 Agustus 2016 pukul 16.56

    bermanfaat bener gan tq ntar ane coba

    BalasHapus
  9. Unknown2 Agustus 2016 pukul 17.06

    Sangat bermanfaat gan :D nnti ane coba deh di blog ane

    BalasHapus
  10. belajar2 Agustus 2016 pukul 17.29

    thanks infonya gan..'
    ane coba dulu di blog ane yah

    BalasHapus
  11. Alvy2 Agustus 2016 pukul 17.31

    Bermanfaat gan, btw itu film who am i gan?😅

    BalasHapus
    Balasan
    1. Fittra Ferdiansyah2 Agustus 2016 pukul 17.39

      iya om, WHO AMI hhehehee penggemar film hacker ya??

      Hapus
  12. Dipta2 Agustus 2016 pukul 17.53

    thanks sudang ngeshare gann ane coba dulu

    BalasHapus
  13. Adelio Cetta2 Agustus 2016 pukul 18.02

    Wah makasih banyak infonya gan.. Makasih udh dishare :)

    BalasHapus
  14. bima2 Agustus 2016 pukul 18.25

    work banget gan :D bookmark ah :D

    BalasHapus
  15. Unknown2 Agustus 2016 pukul 18.29

    Thanks gan...perlu untuk di coba ni...

    BalasHapus
  16. Adi2 Agustus 2016 pukul 18.52

    it works Gan shankuuuuu mayan buat anime wkwkwk XD

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

MENAMPILKAN REFFERAL URL

PHP Bismi-llāhi r-raḥmāni r-raḥīm... Assalamu'alaikum Warohmatullohi Wabarokatuh... PHP :: Menampilkan Refferal URL Sebelum mempelajari PHP pada tahap ini Anda diharuskan sudah memahami apa itu php, dan dasar-dasar php. Ini dikarenakan tahap ini adalah tahapan tambahan di dalam php yang bisa Anda gunakan sebagai pemanis program dari website yang telah Anda buat... CODEX :: Code Xample Seperti biasa sebelum menuliskan struktur php yang akan di proses, tulislah terlebih dahulu kode pembuka dan penutup pada php. <?php #struktur kode dasar ?> Kemudian untuk menampilkan URL Refferal yang mengarah ke halaman ini, gunakan  $_SERVER[''] ; dengan tambahan  HTTP_REFERER  sehingga menjadi seperti berikut ini. <?php #struktur kode dasar $_SERVER['HTTP_REFERER']; ?> Sekarang coba jalankan, hheeeeeheheheee... Masih kosong ya! :D Sekarang tambahkan echo dengan tambahan kalimat " Anda menuju ke halaman ini da...
22 komentar
Selengkapnya »

CARA MENGGUNAKAN FUNGSI FOREACH DI PHP

Salam sahabat setia www.fittraferdiansyah.info ! PHP: Function Foreach Merupakan sebuah fungsi yang biasa digunakan khusus untuk data yang bersifat array, dengan Foreach kita dapat menampilkan data array dan melakukan perulangan pada data array tersebut. Struktur Dasar Penulisan Foreach Dalam penulisannya foreach tergolong sangat simple karena hanya menggunakan sedikit struktur dalam penulisannya. <?php foreach ($variable as $key => $value) { # code... } ?> Keterangan : $variabel merupakan kumpulan data yang telah dibuat/ditentukan dalam bentuk array. $key merupakan pengurutan array secara otomatis biasanya dimulai dari 0-sekian. $value merupakan nilai dari key yaitu data yang akan di urutkan. Contoh Penggunaan : <?php $data= array("Andi", "Sulaiman", "Kimberly", "Thomson", "Fittra", "Ferdiansyah"); foreach ($data as $key => $value) { echo "Data dengan nomor {$key} b...
19 komentar
Selengkapnya »