Selamat malam Jaco...
Ini pertama kali saya menulis tutorial di jaco. Untuk tutorial permulaan ini, saya akan coba share penggunaan tag video dan audio pada HTML5. Langsung aja ya...
1. Penggunaan Tag Audio
Pertama kali kita buat satu folder, misal folder audio. Kemudian buka notepad ++ atau dreamweaver. Untuk penggunaan tag audio disini, kita akan menggunakan audio dengan filename horse.mp3, jangan lupa audio tersebut dimasukkan terlebih dahulu kedalam folder audio yang sudah dibuat sebelumnya (ingat : jangan sampai berbeda folder!! J). Kemudian, ketikkan code seperti dibawah ini pada notepad ++ :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Audio HTML5</title> </head> <body> <embed height="40" width="500" src="horse.mp3"> <p> Suara Sepatu Kuda</p> </body> </html>
Code :
embed height="40" width="500"
ini untuk mengatur besar tampilan dari audio yang akan kita tampilkan dibrowser.
Setelah code diatas kamu masukkan kedalam notepad ++, maka simpan pada folder yang audio misalnya dengan filename : audio.html.
Untuk mengakses HTML5, gunakan browser (cth : GoogleChrom, Firefox) yang kompatibel dengan HTML5. Jika tidak bisa diakses, maka update browser anda.
Untuk mengakses code yang sudah kita buat diatas, maka klik kanan pada file, kemudian pilih open with “browser” yang ada inginkan.
2. Penggunaan Tag Video
Sama Seperti diatas, namun hanya penggunaan tagnya saja yang diubah. Pertamakali siapkan terlebih dahulu file video yang akan anda gunakan, misalnya disini saya akan menggunakan file movie.mp4. Kemudian letakkan video tersebut kedalam folder yang sudah kita buat diatas. Setelah itu, buka notepad ++ baru, kemudian masukkan code dibawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Video HTML5</title> </head> <body> <h1> ini Video </h1> <video width="320" height="249" controls autoplay> <source src = "movie.mp4" type ="video/mp4"> </video> </body> </html>
Penggunaan tag video pada file ini adalah sebagai berikut :
<video width="320" height="249" controls autoplay> <source src = "movie.mp4" type ="video/mp4"> </video>
Code :
video width="320" height="249" pada <video width="320" height="249" controls autoplay>
digunakan untuk menentukan ukuran tampilan video pada browser.
Perintah “controls autoplay” yaitu untuk membuat control autoplay pada video.
Pada “source src”, masukkan nama file video yang anda inginkan, jangan lupa sertakan tipe filenya misalnya, mp4, oog, vlc.
Setelah itu semua selesai, kemudian simpan file kedalam folder diatas dengan filename video.html.
Untuk mengakses code yang sudah kita buat diatas, maka klik kanan pada file, kemudian pilih open with “browser” yang ada inginkan.
Selamat Mencoba ...
