Sabtu, 06 April 2024 |
Halo guys, kali ini kita akan membahas tentang cara menyisipkan video dan audio di HTML. Dengan perkembangan teknologi, kini penggunaan multimedia dalam website semakin umum dilakukan. Nah, berikut adalah langkah-langkah untuk menyisipkan video dan audio di HTML.
Pertama-tama, kita akan membahas tentang cara menyisipkan video di HTML. Video dapat ditambahkan ke halaman web menggunakan tag <video>
. Berikut contoh penggunaannya:
<video width=320 height=240 controls>
<source src=movie.mp4 type=video/mp4>
<source src=movie.ogg type=video/ogg>
Your browser does not support the video tag.
</video>
Pada contoh di atas, kita memberikan width dan height video, serta menambahkan atribut controls untuk menampilkan kontrol video. Kemudian kita menambahkan dua sumber video, yaitu file dengan format .mp4 dan .ogg. Jika browser tidak mendukung satu format, maka akan mencoba format lainnya.
Selain video, kita juga dapat menyisipkan audio di HTML. Untuk menambahkan audio ke halaman web, kita dapat menggunakan tag <audio>
. Berikut contoh penggunaannya:
<audio controls>
<source src=song.mp3 type=audio/mpeg>
<source src=song.ogg type=audio/ogg>
Your browser does not support the audio tag.
</audio>
Pada contoh di atas, kita juga menggunakan atribut controls untuk menampilkan kontrol audio. Kita juga menambahkan dua sumber audio, yaitu file dengan format .mp3 dan .ogg.
Untuk menyesuaikan ukuran video dan audio, kita dapat menggunakan atribut width dan height. Sedangkan untuk menambahkan kontrol, kita dapat menggunakan atribut controls.
Selain itu, kita juga dapat menambahkan atribut autoplay untuk membuat video atau audio otomatis diputar saat halaman web dimuat. Namun, penggunaan atribut ini sebaiknya dihindari karena dapat mengganggu pengalaman pengguna.
Sekian artikel tentang cara menyisipkan video dan audio di HTML. Dengan memahami langkah-langkah di atas, kita dapat dengan mudah menambahkan multimedia ke halaman web. Jangan lupa untuk selalu memperhatikan hak cipta dalam penggunaan video dan audio. Selamat mencoba!
View :46 Publish: Apr 6, 2024 |
Artikel Terkait