» » Audio dan Video

Audio dan Video

By Fadli_Computer Labels: at Januari 26, 2026

Assalamu’alaikum Wr. Wb

Pengantar

Hai bagaimana kabarnya? Semoga baik-baik saja ya teman-teman. Melanjutkan artikel yang sebelumnya membahas tentang Image. Dan pada kesempatan kali ini akan membahas Audio dan Video pada HTML.

 

Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.

Praktik HTML

Pada praktik kali kita akan membahas audio yang berfungsi untuk menambahkan suara pada tampilan website, dan Video berfungsi untuk menambahkan video pada website.

Contoh Praktiknya:

Audio:

Kode HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <p>Lagu Band Linkin Park</p>
    <audio src="LinkinPark-Borrow_and Streaming.mp3" controls></audio>
</body>
</html>

 

Gambar 1 kode audio

Gambar 2 hasil kode audio

Disini untuk dapat menampilkan file audio, perlu di masukan dalam satu folder pada file .html dan menggunakan atribut control untuk dapat memuntar audionya  yakni tombol play/stop, slider, volume, timer, dll. 

Format audio pada browser : 

Gambar 3 format audio

HTML audio support untuk media type:

Gambar 4 media type
Browser support untuk audio:
Gambar 5 support browser audio
Video:
Kode HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <p>Contoh video</p>
    <video src="Contoh_Video.mp4" controls></video>
</body>
</html>  

Gambar 6 kode video

Gambar 7 hasil kode video

Disini karena video terlalu besar, jadi bisa di atur menggunakan atribut width dan height

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML di Alami Computer</title>
</head>
<body>
    <p>Contoh video</p>
    <video src="Contoh_Video.mp4" controls width="500" height="250"></video>
</body>
</html>

Gambar 8 kode audio menggunakan width dan height

Gambar 9 hasil kode audio menggunakan width dan height
Browser support untuk video:
Gambar 10 support browser video
Format video pada browser :
Gambar 11 format video
HTML video support untuk media type:
Gambar 12 support media type

Kesimpulan

Pembahasan tentang audio dan video yang keduanya berfungsi untuk menambahakan konten berupa audio dan video pada website untuk menarik tulisan pada website. Tujuan teman-teman yang membuat file html atau pemograman bisa menggunakan dengan baik dan sesuai dengan fungsi dan kelayakan pada sebuah kode-kode program yang akan dijalankan.

Terimakasih sudah berkunjung sampai ketemu di artikel selanjutnya, jangan lupa ikuti chanel kami yaitu :

YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli

Daftar Pustaka: Tim Riset Alami Computer 

 

2 komentar:

Berkomentar dengan baik dan benar

Back to Top