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 :)
bikin berat loading nggak yah mas, makasih buat tutorialnya sangat bermanfaat :)
Gak kok mas, malah yang bikin berat itu klo make plugin flash buat playernya
Iya lebih baik menggunakan tag HTML5 daripada flash, memang HTML5 dikembangkan agar memudahkan penggunaan multimedia dalam web. :D Hehehehe
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.
mas klow ngambil dari folder kita audio misal difolder c gitu waktu di browser bisa cman waktu dilinkngin gk bisa di puter
Mantab mas,, ilmu baru lagi #horeee :D
Girang bener mas, padahal itu ilmu lama lho :D
manteb dapat ilmu baru nih Kang. Ijin tak copy biar enteng di loading
Silahkan kang pakies :)
trus cara masukin video or audionya gimana mas imam???
Sama dengan yang diatas,masukin video-nya bmna ? ._.
Tinggal upload videonya, lalu masukin urlnya ke dalam tag html5 tadi :)
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?
Oia itu didalam contoh tidak ada videonya yah :D
ihh mantap kali nih … wajib di coba … makasih banyak ilmunya ini super sangat bermanfaat ^_^’d
Silahkan dicoba mas ;)
wah, sejak kapan saya ganti gender … hehehe …
sip2.
Abis ga ada fotonya sih, untung aja gravatarnya bukan monster :p
menarik jika dapat masukkan video begini.. banyak yang saya kurang faham mengenai html 5 ini..
Semoga tambah paham dikit-dikit meskipun hanya fitur-fitur html5nya saja
wahhh ribet jugaaa yaaa… :D
Ribet klo gak baca artikelnya :D
Mantap mas..pke html5 jga bsa ya
Bisa donk, apasih yang gak bisa dengan html5 :D
Mantap ilmunya kang..
Jago bener ente koding
Gak juga mas, cuma copy paste kok :p
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
Memang benar sekali, doctype harus memakai html5 :)
kenapa videonya gak bisa tampil ketika diganti dengan bentuk video yang lain,,,, berbunyi bisa, v tampilnya yang gk pernah bisa….. infonya gan
Harus dukung codecnya, untuk menamahkan codecnya liat di w3c aja :)
maaf, gimana caranya saat text disorot audionya bisa langsung main?
on-text-load
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
d body, klo di head tidak di render halamannya
Lho kan diatas sudah lengkap
Kak, saya coba copas kok yang muncul cuma suaranya? gambarnya tidak mau muncul? minta bantuannya donk…:-)
Lha klo audio memang ga ada gambarnya, klo video ada gambarnya
Mungkin format videonya tidak didukung kali :)
mas kalo mau nampilin lagu nya secara otomatis saat web di buka bisa nggak ya?
Autoplay bisa kok :)
bagaimana caranya supaya ada 2 video bisa terputar secara bersamaan..
kan klw script di atas hanya bisa 1 video..
Bisa kok, tinggal dipasang 2 aja mas :)
ok gan, tq
Iya sama-sama
ijin copy ya mas codingnya.. :)
Silahkan :)
mas…kalau source videonya di folder kita gimana ya mas menulis scripnya..
matur nuwun salam kenal dari elyas
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 !!
Format video tidak didukung, mungkin bisa dicoba video format mp4 / ogg
biar gx autostart gmna mas???
Mas aku ganteng ga
klo memasang radio streaming dr listen2myradio.com, bagaimana caranya mas ?
cara agar video diputar secara random dari banyak video ada tutorialnya gak mas????
mas cara buat blog kyk mp3 skuLl gmna ya? :D Tolong di jawab, makasih
wah bagus tuh,, tapi sayamah bingung ntu teh d masukin d HTML tamplate atw d mna y….?!! hehehe maklum newbie….
Mas Imam,, narok script ini di mana ya?? kok pas di tarok gambar videonya hilang..?? mohon bantuannya. trimakasih
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.
makasih mas. sangat membantu :D
Berarti kalo pake html5 gak usah databse ya ms?
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…
mantap bang, terima kasih sudah mau berbagi.
Makasih min buat info nya :)
Sangat berguna sekali …
videonya bisa responsive juga ga mas ?
udah saya coba mas alhasil monggo di lihat http://www.mevid.xyz
Code Pemutar Video is good
izi numpang share Oom..
mas, gmna ya coding nya supaya video yang dari database dapat diputar di web kita?
Kunjungi Mbalik Brow : http://www.klasikkontemporer.com