Membuat Pemutar Audio Video Dengan HTML5- Untuk Memainkan File Video di Web Browser Dengan Bantuan HTML5,ada pun sebagai berikut Kodingnya.
Sebelum menuju ke koding persiapkn alat yang di butuhkan.
- Notepad++
- web browser yang mendukung
<html><head></head><body><video src="video1.MP4" controls="controls">Untuk Memutar Audio Klik Audio</video></body></html>
Simpan dengan dengan nama index.html ,video1.MP4,adalh video yang di simpan satu folder dengan file index.html ,Jika koding HTML tersebut di jalankan di web browser,maka Akan muncul Tampilan,Video,,Tapi Video Yang elum di putar atau di mainkan.
Untu memainkan video tersebut Anda bisa menekan tombol play,Maka anda sudah bisa melihat video yng di mainkan di web browser.,
Anda Juga bisa mengontrol memutar dan menjalankan video dengan kode otomatis,misal kode berikut ini yang akan memainkan video jika pointer mouse hover(ada di atas video),dan kemudian memp-pause video ketika pointer mouse belum di lepaskan dari atas video.
<html><head><title>Menjalankan Video dengan Pointer</title></head><body><h3>Letakan Pointer Mouse Di atas Video unntuk memainkan</p>Untuk Pause Hilangkan Pointer mouse pada Video</h3><video onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true" width="480" height="320" src="video1.MP4" >Untuk Memutar Audio Klik Audio</video></body></html>
dengan kode di atas, juga ada koding untuk mengatur besar ukuran video yang akan di tampilkan ,dengan atribut, height dan width. jika fle tersebuut di jalankan di web browser maka akan tampil.
untuk memainkan video letakan mouse pointer di atas,video maka video akan di mainkan secara otomatis,dan untuk mempausnya pindhakn mouse pointer dari atas video,maka video akan otomatis pause.
Kemudian untuk Pemutar Audionya, Bisa lihat koding berikut.
Membuat Pemutar Audio WEB HTML5-Cara Membuat Pemutar Audio WEB HTML5-Untuk Memainkan file audio dan video sama saja,hanya saja tag yang di gunakan berbeda untuk memutar audio tag yang digunkan adalah, <audio>,dan di tutup dengan </audio>,
untuk lebih jelasnya lihat koding berikut:
Sebelum Membuat Koding persiapkan lat yang di butuhkan
- Notepad++
- Dan Web Browser yang mendukung.
<html>
<head>
</head>
<body>
<audio controls src="audio1.mp3">Untuk Memutar Audio Klik Audio</audio>
</body>
</html>
Simpan dengan nama index.html,sedikit penjelasan,di atas ada file audio dengan nama audio1.mp3 dengan lokasi penyimpanan satu folder dengan file html yang sudah di buat seperti kode diatas, jika di jalan kan di web browser yang mendukung,maka akan muncul tampilan berikut di web browser.
jika di klik play,barulah file audio akan diputar atau di mainkan,anda juga bisa mengontrol pemutar audio tersebut dengan dengan klik kanan.
Anda juga dapat menambah sorces file audio atau video lebih dari satu,nantinya browser akan melihat mana file yang lebih feasible untuk di akses.
<audio controls><source src="audio1.mp3"><source src="audio2.mp3"><source src="audio3.mp3">lakukan reload halaman web browser anda,untuk menampilkan audio yang baru di tambahkan</audio>
Anda juga dapat memutar audio secara automatic,artinya apabila file html yang berisi source audio di jalankan di web browser,maka audio tersebut akan otomatis terputar,tanpa kita mengklik play.agar file audio autamatik terputar kita hanya melakukan perubahan atribut koding di bagian tag <audio>,di mana kkita menambahkan kan atribut autoplay.
untuk lebih jelasnya lihat koding berikut.
Dengan atribut autoplay ,media akan di mainkan begitu file html di jalankan di web browser.<html><head></head><body><audio autoplay src="audio1.mp3">Untuk Memutar Audio Klik Audio</audio></body></html>
Nah itu sedikit tutorial dari saya semoga bermanfaat,untuk sebagai referensi anda,,,jika berkenan silahkan di share ,terimakasih.