Belajar HTML (19): Menyematkan File Multimedia pada Halaman Web
Kalau sebelumnya kemaren kita buat teks yang bisa berjalan menggunakan marquee, kali ini kita akan memasukkan file multimedia ke dalam halaman web. Masih tetap dalam bahasa standar web yaitu HTML.
Tidak semua file multimedia yang akan kita sematkan di halaman web. Kita hanya akan mencoba tutorial untuk 2 jenis file multimedia saja, yaitu audio dan video. Teknologi yang digunakan adalah HTML5.
Bagaimana ceritanya? Tentu Anda pasti pernah mendapati sebuah web yang ketika dibuka memperdengarkan suara, entah apapun itu suaranya. Biasanya sih berupa lagu atau apa lah begitu. Terkadang kita lihat ada player atau pemutar lagu tersebut, kadang tidak ada. Ada juga yang tidak diputar sebelum kita klik tombol play. Paling banyak adalah yang ketika web diakses langsung memutar suara secara otomatis. Demikian juga dengan video, sama.
Audio
Untuk memuat dan memutar file audio, kita gunakan tag <audio>
dengan struktur dasar seperti ini:
<audio> <source src="nama_file_audio.ext"></audio>
Nah pada tag <audio>
ini ada beberapa atribut yang bisa digunakan, saya masukkan 3 saja. Lihat tabel.
Atribut | Keterangan |
---|---|
controls | untuk menampilkan playernya |
loop | mengaktifkan pengulangan jika durasi audio sudah berakhir |
autoplay | langsung memutar audio secara otomatis tanpa mengklik tombol play |
Ayo kita coba latihannya, buat file baru menggunakan editor kesayangan Anda, atau bisa juga dengan melakukan save-as dari file-file latihan sebelumnya.
Simpan dulu filenya dengan nama 44-html-audio.html, kemudian sesuaikan kodenya agar menjadi seperti di bawah ini:
<!DOCTYPE html><html><head> <title>Audio</title></head><body> <h2>Memutar file audio</h2> <audio controls> <source src="habib_syech_almadad.mp3"> Browser Anda tidak mendukung audio. </audio></body></html>
Sebelum dicoba, pastikan dulu file audionya ada ya, dan diletakkan pada folder yang sama dengan file latihan ini. Silakan ganti nama file audionya sesuai yang Anda punya. Setelah dijalankan hasilnya akan menampilkan player, klik tombol play dan dengarkan audionya 😎
Tampilan hasilnya punya saya seperti gambar-gambar berikut ini, saya gunakan 4 browser agar bisa dilihat perbedaan playernya.
Pada browser Internet Explorer seperti ini. Playernya besar 😆
Nah kalau yang ini di Forefox.
Saya coba juga di Edge, playernya sama dengan yang di IE, beda ukurannya saja 😉
Ini tampilan dari Chrome, berbeda dari yang lain ya, ada opsi untuk downloadnya 😎
Mana yang paling keren? Hehe, ga penting bro. Kenapa? Karena tergantung siapa yang mengakses dan menggunakan browser apa…
Lanjut ya… Latihan di atas menghasilkan player yang mana audionya baru akan diputar jika tombol playnya diklik. Kalau idak diklik, maka sampai kiamat nanti audionya tidak akan diputar 😆
Nah kita coba tambahkan atribut lainnya agar bisa diputar otomatis dan akan berulang jika durasinya sudah habis. Menggunakan apa? Ada saya masukkan di tabel halaman sebelah tadi ya… Kita tambahkan atribut autoplay dan loop saja pada tag <audio>
.
Save-as file tadi sehingga menjadi 45-html-audio-loop-autoplay.html, ubah kodenya menjadi seperti ini:
<!DOCTYPE html><html><head> <title>Audio Loop Autoplay</title></head><body> <h2>Memutar file audio</h2> <p>File audio akan diputar otomatis dan diulang jika durasinya sudah habis.</p> <audio controls loop autoplay> <source src="habib_syech_almadad.mp3"> Browser Anda tidak mendukung audio. </audio></body></html>
Saya tidak perlu tampilkan hasilnya ya, silakan dijalankan dan lihat sendiri.
Ada pertanyaan, bagaimana kalau audionya diputar otomatis dan diputar ulang jika durasinya sudah habis tetapi tanpa menampilkan player?
Caranya mudah. Masukkan atribut loop dan autoplay saja tanpa atribut controls, selesai 😎
Video
Bagaimana memasukkan video ke dalam halaman web? Sebenarnya sama saja dengan audio, bedanya hanya di tag saja yaitu menggunakan <video>
ditambah dengan atribut height dan width untuk mengatur ukuran tampilan videonya. Adapun atribut lainnya sama saja termasuk fungsinya seperti controls, loop dan autoplay.
Perbedaan spesifik hanya pada player, untuk file video ada seekbarnya yang dapat digeser dan juga tombol fullscreen.
Kita coba? Oke, Langkah paling cepat dengan save-as file sebelumnya kemudian simpan dengan nama file 46-html-video.html. Ubah dan sesuaikan isi kodenya menjadi seperti ini, contohnya lengkap semua untuk atributnya:
<!DOCTYPE html><html><head> <title>Video</title></head><body> <h2>Memutar file video</h2> <video controls loop autoplay width="480" height="340"> <source src="rabbahu_bidzikrika.mp4"> Browser Anda tidak mendukung video. </video></body></html>
Pastikan juga file videonya sudah ada ya… 😉
Setelah dijalankan hasilnya seperti gambar berikut, saya tidak coba lagi untuk browser lain ya, cukup 1 saja 😆
Untuk tutorial bagaimana menyematkan file multimedia lainnya silakan explore sendiri saja ya 😉 Kita ketemu lagi dipembahasan lain…
Gabung dalam percakapan