A. HTML Audio
HTML audio berfungsi untuk menyematkan file suara dalam halaman web, tag yang digunakan <audio>, cara menambahkan file html:
- Pilih file audio yang ingin ditambahkan:
gunakan format yang didukung oleh browser, seperti MP3, WAV, OGG, AAC, Vorbis, Opus, FLAC. - Tambahkan tag < audio >:
tambahkan tag < audio > pada html - Gunakan atribut src untuk menentukan sumber audio:
tambahkan atribut src untuk menunjukkan lokasi file audio.
Contoh: < audio src= “Audio File.mp3” >< /audio >. - Tambahkan
Atribut-atribut tambahan
Untuk mempercantik tampilan terdapat beberapa atribut tambahan yang dapat digunakan untuk mengontrol pemutaran audiodi antaranya controls, autoplay, loop, dan muted.
- Atribut controls :
untuk menampilkan tombol kontrol seperti tombol play, pause, dan volume,
tambahkan atribut controls. Contoh: < audio src= “musik.mp3” controls> - Atribut autoplay:
memungkinkan audio untuk mulai diputar secara otomatis begitu halaman web dimuat.
Contoh penggunaannya adalah . Harap diingat bahwa beberapa browser mungkin membatasi atau memblokir autoplay untuk menghindari gangguan bagi audiens. Hal lain yang perlu dipahami adalah autoplay hanya bisa digunakan jika audio tersebut diberi property muted terlebih dahulu. - Atribut loop:
untuk membuat audio berulang terus-menerus setelah selesai diputar. Hal ini bisa berguna untuk web yang memiliki background musik atau efek suara berulang. Contoh penggunaannya adalah < audio src=”musik.mp3 ” loop>. - Atribut muted: atribut ini menyebabkan audio dimainkan dalam keadaan bisu. Pilihan ini bisa berguna jika ingin audio dimulai tanpa suara dan memberi audiens pilihan untuk mengaktifkan suaranya. Contoh penggunaannya adalah < audio src=”musik.mp3″ muted> .
Semua atribut di atas dapat digabungkan sesuai kebutuhan, seperti < audio src=”musik.mp3″ autoplay loop muted> < /audio> yang akan memainkan audio secara otomatis, berulang, dan dalam keadaan bisu.
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com Audio</title>
</head>
<body>
<h1>Contoh File Audio pada website</h1>
<audio src="Audio File.mp3" width="320" controls autoplay> </audio>
</body>
</html>Dapat duga menggunakan format audio alternatif:
untuk memastikan kompatibilitas lintas browser, tambahkan elemen < source > dengan format audio yang berbeda
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com Audio dengan Source</title>
</head>
<body>
<audio controls>
<source src="Audio File.mp3" type="audio/mp3">
<source src="Audio File.mpeg" type="audio/ogg">
Browser kamu tidak mendukung tag audio ini.
</audio>
</body>
</html>B. HTML Video
HTML Vide berfungsi untuk menyematkan file video (gambar dan suara) dalam halaman web, tag yang digunakan tag <video>. Perlu dipahami bahwa tidak semua browser mendukung keseluruhan format video, pilih browser yang dapat memutar file video html
Format yang didukung oleh browser diputar dalam browser MP4, WebM, Ogg
Ukuran video yang dalam penggunaan HTML video bervariasi tergantung pada kebutuhan, beberapa pedoman yang dapat dipertimbangkan:
- Resolusi: resolusi yang umum digunakan adalah 480p (854 x 480 piksel) untuk video dengan kualitas standar dan 720p (1280 x 720 piksel) atau 1080p (1920 x 1080 piksel) untuk video berdefinisi tinggi. Resolusi yang lebih tinggi memberikan kualitas gambar lebih baik tetapi ukuran file-nya lebih besar.
- Ukuran file: mengingat waktu pemuatan halaman, ukuran file video sebaiknya tidak terlalu besar. Usahakan file video berukuran di bawah 5MB agar mengoptimalkan user experience. Kamu bisa menggunakan teknik kompresi untuk mengurangi ukuran file tanpa kehilangan kualitas yang signifikan.
- Aspek rasio: aspek rasio yang paling umum adalah 16:9 karena cocok untuk kebanyakan layar device. Aspek rasio ini memberikan tampilan proporsional.
Atribut yang digunakan dalam html video
| Nama Atribut | Nilai | Fungsi |
|---|---|---|
autoplay | true/false | Agar video diputar otomatis |
controls | true/false | Untuk mengaktifkan control video player |
loop | true/false | Untuk memutar video terus menerus |
muted | true/false | Untuk menonaktifkan audio |
poster | Image Path | Untuk menentukan gambar cover dari video |
width & height | angka | Untuk menentukan tinggi dan lebar video |
playsinline | true/false | Untuk memutar video secara ‘inline |
Langkah menambahkan Video
- Siapkan file video
Siapkan File video yang didukung seperti MP4, WebM, atau Ogg. File video harus tersimpan di direktori yang sama dengan file HTML atau di tempat yang dapat diakses oleh file HTML. - tambahkan tag < video >
tambahkan tag < video > ke bagian yang diinginkan - tambahkan atribut src
Gunakan elemen < source > dengan atribut src untuk menunjukkan lokasi file video. Jika lebih dari satu elemen gunakan tag < source > - tambahkan atribut Lain
Jika diperlukan, bisa menggunakan atribut diatas (autoplay, controls dsb)
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com Video</title>
</head>
<body>
<h1>Contoh File Video pada website</h1>
<video src="Video File.mp4" width="320" height="240" controls> </video>
</body>
</html>C. Menambahkan Video dari YouTube
Menambahkan video dari YouTube ke halaman web tidak hanya meningkatkan interaktivitas tapi juga memberikan konten berkualitas tanpa perlu menyimpan file video di server.
Langkah menambahkan Video dari Youtube
- Pilih Video Youtube yang ingin ditambahkan dalam website
Pilih video YouTube yang ingin ditambahkan ke website. Buka video tersebut di browser - klik tombol “Share” pada tombol dibawah video youtube
- klik “Embed”
- copy kode embed
- paste kode ke File HTML
- sesuaikan ukuran (opsional)
Untuk cara lengkap menambah video kedalam blok/website klik disini
Leave a Reply