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 »

Mengenal Fungsi Explode Dalam PHP

Hello sahabat www.fittraferdiansyah.info . Kali ini kita akan membahas lagi mengenai belajar PHP , jangan pernah bosan ya untuk belajarnya! Nah, kali ini yang kita bahas adalah PHP mengenai cara menggunakan fungsi Explode . Fungsi Explode digunakan untuk memisahkan atau memecah-mecah suatu string berdasarkan tanda pemisah yang kita tentukan sebelumnya. Tanda itu biasa berupa " spasi " atau " ", " koma " atau " , ", tanda " penghubung " atau " - " dan lain sebagainya berdasarkan keinginan dan selera kita masing-masing. Oh ya, hasil dari explode pada suatu string ini bersifat array. Struktur dasar penulisan Explode <?php explode(delimiter, string); ?> Keterangan : Delimeter adalah tanda pemisah yang digunakan untuk memecah suatu string. String adalah variabel yang akan kita pecah. Contoh : <?php $nama_siswa = "Andi Fittra Rozali Ibnu Fatimah Bella Rizkia"; $pecah = explode(...
18 komentar
Selengkapnya »