Untuk membuat web lebih mantap, kita perlu memasukkan video atau adio ke website kita, makanya kali ini saya akan mengajarkan cara memasukkan video & audio ke website menggunakan HTML5

Memasukkan video & audio menggunakan HTML5

Untuk membuat web lebih mantap, kita perlu memasukkan video atau adio ke website kita, makanya kali ini saya akan mengajarkan cara memasukkan video & audio ke website menggunakan HTML5

Sebelumnya kita perlu mengatahui bahwa setiap browser men-support audio dan video dengan tipe yang berbeda-beda, jadi yang paling baik itu kalau kita menyediakan video/audio yang sama dengan format yang berbeda-beda

 

Mari kita mulai dengan audio, kode paling dasar untuk memasukkan audio seperti begini:

<audio>
  <source src="namafile.ogg" type="audio/ogg">
  Teks ini akan muncul jika browser tidak support HTML5 audio tag.
</audio> 


<source> berfungsi untuk memainkan audio yang dipilih, file audio harus bertipe ogg (audio/ogg) atau wav (audio/wav) atau mp3 (audio/mpeg), beberapa source bisa dimasukkan (contohnya mp3 dan ogg, jadi kalau browser tidak support mp3 tapi ogg audio masih bisa dimainkan, atau sebaliknya)

Di tag audio, ada beberapa properti yang bisa dimasukkan:

autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan

controls berfungsi menampilkan tombol play,pause,volume, dll.

loop berfungsi agar audio dimainkan berulang-ulang

muted apakah audionya mau di-mute atau tidak

preload (auto, metadata, none) apakah audionya load pada saat pagenya sedang diload?

src menunjukkan URL dari audio yang akan dimainkan (yang ini tidak diperlukan kalau sudah ada <source>)

 

Sedangkan untuk video, pada dasarnya mirip audio

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video> 

Format video harus mp4 atau webM atau ogg (lagi, setiap browser mendukung format yang berbeda-beda)

Untuk properti, semuanya sama dengan untuk <audio>, hanya saja ada beberapa properti yang ada di <video> tapi tidak  ada di <audio>

width & height untuk mendefiniskan lebar dan tinggi video

poster mendefinisikan URL gambar yang akan dimunculkan saat videonya sedang buffer, atau sebelum di-play oleh user

 

Sekian dari ane, semoga bermanfaat


About Author

Richard


Comment & Discussions

    Please LOGIN before if you want to give the comment.