Happy Sunday All.. walah.. minggu-minggu malah update tutorial, uda malem lagi.. tak apa deh.. kali ini tutorial datangnya dari seseorang yang mengirimkan message mengenai HTML 5.. walah.. pasti tahu donk apa itu HTML 5?.. tentu saja.. HTML 5 merupakan versi terbaru dari html dimana ada beberapa tag-tag baru yang disuntikkan didalamnya.
Anda pasti akan menjumpai tag seperti
<article>,
<header>,
<footer>, dll.. dan tentunya yang paling mencolok dari itu semua adalah tersedianya fitur pemutar Video / Audio..
Kali ini, saya ingin men-share mengenai pemutar Audio / Video.. mengapa?.. karena menurut saya, kedua fitur tersebut memang yang paling menarik..
pada html versi sebelumnya, bagaimana caranya agar kita dapat memutar video didalam web?.. Wah.. ribet banget deh.. kita harus menggunakan tag <embed embed wewewe gombel> walah.. wewe gombel dibawa-bawa.. piye toh?..
Nah, pada html 5, cukup kita menggunakan tag
<audio> </audio>
untuk memutar audio/suara dan
<video> </video>
Untuk memutar video.
Format dasarnya seperti berikut :
<audio controls="controls">
<source src="NamaLagu.mp3" type="audio/mp3" />
</audio>
sedangkan untuk Video :
<video controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Web Browser tidak mendukung tag Video HTML 5
</video>
Oh iya, didalam HTML 5, Video hanya mengenal 3 jenis format, yaitu Ogg, MP4, dan WebM.. jadi pastikan format yang ingin ditampilkan adalah demikian ya.. nah, pertanyaannya.. bagaimana jika saya hanya mempunyai video berformat FLV, AVI, dsb?.. tenang aja.. kan banyak tuh Aplikasi Video Converter?.. tinggal di convert aja ke format yang didukung HTML5.
Berikut keterangan Format Video :
- 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.
Berikut adalah contoh penggunaan dalam html untuk memainkan fitur Audio :
<h4>Choy Shen Doh - Samuel Hui</h4>
<audio controls="controls">
<source src="Choy Shen Doh - Samuel Hui.mp3" type="audio/mp3" />
</audio>
dan Berikut adalah contoh penggunaan dalam html untuk memainkan Video :
<h4>Video Happy Tree Friends</h4>
<video controls="controls">'
<source src="video.mp4" type="video/mp4" />
</video>
Ada kelemahan dari HTML5 ini, yaitu belum semua web browser mendukung HTML5.. tapi tunggu saja.. ke depannya pasti web browser akan mendukung HTML versi ini.. untuk mencobanya, pastikan web browser Anda adalah :
- Internet Explorer (IE) versi 9.0+
- Firefox versi 3.5+
- Opera versi 10.5+
- Google Chrome versi 5.0+
- Safari versi 3.0+
Namun, disini saya mencobanya dengan menggunakan Google Chrome.. dan semua tanpa kendala..
Oh iya, saat ini saya sedang mencoba menulis buku yang isinya membahas Pemprogram Web.. PHP + MySQL + MySQL Database Server + HTML 5 + CSS 3.. doakan lancar ya.. (baru 3 bab nih) :-)
Semoga postingan ini dapat memberikan manfaat yang sebesar-besarnya untuk Anda..
luki
mantab mas agus.. good tutor.. oh iya, ane tunggu buku nya mas..
Agus Saputra
luki @ tq mas luki ..
candra
mas tolong di bantuin dong cara buat menu pake css di cakePHP minimal kayak menu di atas tuh...kalo bisa menunya yg pake gambar ...cara penyampaian dalam buku teknik cepat ..cakePHP sudh cukup bagus n mudah dimengerti mulai dari penyajian source kode beserta gambar hasil source kode tersebut dan penjelasan tiap baris saya suka...mas punya video lengkapnya ga biar lebih jelas...tolong ya mas tutorialnya ke emal saya [email protected] thanks mas...
Agus Saputra
candra @ menu CSS ini sebenarnya sudah ada di buku "Pemrograman CSS untuk Pemula".. nanti saya sent yah.. :) Internetnya lagi lama nih ^^
koko
mas tulung ane berikan petunjuk langkah2 membuat website pake php dan html ane udah sedikit paham tentang PHP dan html tapi ane masih bingung merancangnya tulung mas searce booknya kalu ada thank's masss
Agus Saputra
koko @ oke.. nanti saya tampung dulu yah untuk dipersiapkan..
ivan
om kalo mau di kasih width ama height gmn y? aku coba kok g isa?
Agus Saputra
ivan @ untuk menambah width/height bisa tambahkan seperti berikut:
<video width="320" height="240" controls="controls">
<source src="video.mp4" type="video/mp4">
</video>
jhunaidhy
mantooopss...
jhunaidhy
mantooopss...
Agus Saputra
jhunaidhy @ mantobbss jg..
Irham
Mas,,, buku'a udah keluar blm di toko buku gramedia.. ky'a menarik tuh buku'a...
Agus Saputra
Irham @ buku yang mana nih, kalo jQuery uda.. tapi kalo yg mengenai HTML5, CSS3, Database Server, PHP sedang diproses di Penerbit Jasakom.. :)
gilang abdul rahman
bagus sekali tutorial'a tapi sayangnya saya mas dasar mas baru belajar html & css sekarang baru memperdalami javascript... mohon bantuannya ... trims
Agus Saputra
gilang abdul rahman @ yah.. ini juga HTML, namun update terbaru dan saat ini mencapai versi HTML5.. :)
hery
mat malam mas agus saputra...???,,kalo bisa sharring ma mas agus saputra, g mana ya mas agus klo mau buat tampilan header website gambarnya berganti2 tiap menit...btw kalo bisa scriptnya end contohnya di kirim lewat email aku ya mas ..nhee email aku [email protected].////.thaks be4 ya mas agus.slam kenal dari aku hery
Dedi
gan mau tanya..kenapa player yang menggunakan jquery selalu ada file ogg nya..kalau di hapus file ogg nya hanya mp3 saja...kenapa tidak berfungsi ya playernya
ihsan
mas mau tanya kalau tag vidio html5 bila dijalankan di emulator android 2.3.3 ga bisa ya. tp kalau audio bisa. kira2 solusinya gimana ya?
Agus Saputra
ihsan @ memang tidak semua browser support untuk video, saya sudah mencoba, dan hanya di google chrome, video html5 dapat berjalan normal..
iponk
mas aq juga minta menu dropdown dengan css dunx..
kirim email
[email protected]
makasi ya mas...
Agus Saputra
iponk @ sudah saya kirim via email..
tedy
mau tanya donk mas agus
saya sudah mengatur margin left sesuai dengan posisi yg saya bthkan cntoh
#Layer7 {
position:absolute;
left:11px;
top:470px;
width:204px;
height:18px;
z-index:7;
}
ini kan saya bikin di nb tetapi jika saya pindahkan atau saya test di laptop yg resolusinya besar ko jadi ac2kn mksdnya tidak mengikuti background yg sdh sya beri align=center, jadi text yg memakai div dgn pengaturan css diatas stay di tempat tidak otomatis mengikuti resolusi laptop
tolong penjelasan dan solusinya terimakasih.
Agus Saputra
tedy @ ya.. resolusi tiap komputer pasti terkadang berbeda.. yang perlu anda perhatikan adalah di width, atau bagaimana skrip Anda untuk merata tengah background.. untuk tengah, biasanya menggunakan margin: 0px auto;
nanti saya coba jelaskan lagi, baterainya low ^^.. anggap ini hanya perkenalan.. bisa Anda kirimkan ke [email protected]
tedy
ok dont worry
salam kenal jg
iya saya coba kirim
tedy
sudah saya kirim
di tunggu penjelasannya?
mksih
rio
salam kenal mas..saya bru aja beli buku mas yang judulnya membuat aplikasi absensi..bagus pemaparannya.
masalah html5 diatas,aku udah coba nampilin script diatas pake chrome..tpi cm ada playernya aja..gak bisa dimaenin..itu kenapa ya??mksh
Agus Saputra
rio @ pastikan format yang digunakan adalah Ogg, Mpeg-4, WebM, dan juga perhatikan versi browsernya
obang sobarman
orang dah dilangit saya masih dibumi bantuin bikin web master bos...makasih
obang sobarman
saya mau donload html5#csx3 bisa bantu kira2! saya cari2 cd hilang kalau atau beli dimana kira2...makasih
obat kanker prostat
terimakasih untuk informasinya
belajar komputer
makasih om