Dutormasi.com – Halo sahabat dutormasi kita kembali lagi di postingan HTML yang bermanfaat. kali ini saya akan membagikan materi yang cukup menarik untuk HTML kita. Pastinya bosan juga ya dengan tampilan HTML yang gitu gitu aja, ada yang harus ditambahkan seperti Audio / Video. Emang bisa ya? bukannya cuma mengatur kata-kata saja. Pastinya bisa dong. Disini kita akan coba mempraktekkannya. Yuk kita simak.
A. Audio
Audio adalah suara atau bunyi yang akan dapat kita jalankan / putar di halaman HTML kita. Adapun tag akan kita gunakan yaitu <audio> dan beberapa tag pendukung yaitu <source>. Audio ini kita dapat menggunakan file pribadi kita maupun berupa link URL. Bagaimana cara menggunakannya? kita belajar sama-sama.
1.Buka halaman login.html di Visual Studio Code
2.Di VSCode kita tambahkan folder baru dengan nama sound.
3.Setelah itu kita masukkan file audio kita ke dalam sound. Dapat dilakukan dengan drag and drop seperti dibawah.
4.Setelah itu kita ketikkan syntax ini di bawah judul <h1> di login.html kita
<audio controls> <source src="./sound/Cat.mp3"> </audio>
5. Tampilan akan menjadi seperti ini
Ingat!! nama dan letak file harus sama agar bisa terdetect dengan HTML yang kita buat okey.Selanjutnya kita akan menyisipkan video ke dalam HTML.
B. Video
Video adalah suatu informasi yang diperlihatkan dalam bentuk visual. Pada HTML kita dapat menambahkan video sekaligus menentukan ukuran besar video di HTML tersebut. Disini kita dapat menambahkan video pribadi kita maupun video berupa URL. Tutorial kali ini kita akan menggunakan URL sebagai contoh yaitu Link Youtube. Disini kita menggunakan tag <video> dan penggunaanya sama seperti audio di atas.
1. Masih pada file login.html.
2.Dibawah audio yang telah kita buat diatas. Kita akan menambahkan video. dengan syntax berikut.
<video width="400" height="400" controls> <source src="https://www.youtube.com/watch?v=PCjrGIZDoCE"> </video>
3. Selanjutnya maka tampilan akan menjadi seperti ini.
Apakah ada yang berbeda dari tampilan kita? Jika kalian mengatakan mengapa video kami ke samping bisa jadi kalian lupa menambahkan tag <br> yang sudah kita pelajari di postingan sebelumnya.
Jika kalian mendapat masalah video tidak muncul, bisa saja itu karena link yang salah/ nama dan tempat folder yang tidak benar. Atau jangan jangan lupa menambahkan width dan height nya?. Lebih teliti lagi ya…
Selanjutnya ada elemen baru yang ditambahkan. Pasti ada yang sadar yaitu controls. Dan untuk elemen ini bisa kita ubah dengan muted, autoplay, hidden dan sebagainya. Cobain satu satu ya, biar paham beda nya dimana. heheh.
Sekian postingan kali ini jika ada kesalahan saya mohon maaf. Disini admin menyampaikan dengan tujuan memberi ilmu untuk mencerdaskan masyarakat tentunya. Terima Kasih . Salam Dutormasi!!
