Element Media HTML

Element media HTML adalah elemen yang digunakan untuk menampilkan media seperti gambar, audio, dan video. Elemen ini pertama kali didukung pada HTML versi 2.0 yang kemudian disempurnakan pada HTML versi 5.0

A. Gambar

Elemen <img> digunakan untuk menampilkan gambar. Elemen ini tidak memiliki tag penutup atau biasa disebut sebagai elemen tunggal. Elemen ini memiliki dua atribut yang wajib, yaitu src dan alt. Atribut src digunakan untuk menentukan lokasi gambar yang akan ditampilkan, sedangkan atribut alt digunakan untuk memberikan deskripsi gambar.

<img src="https://www.zerocosttechschool.com/_next/image?url=%2Fimages%2Fcharacter.png&w=640&q=75" alt="Deskripsi gambar">

Output :

Elemen <img> juga memiliki beberapa atribut tambahan, yaitu :

Atribut	Deskripsi	Contoh
width	Menentukan lebar gambar	<img src="gambar.jpg" alt="Deskripsi gambar" width="100">
height	Menentukan tinggi gambar	<img src="gambar.jpg" alt="Deskripsi gambar" height="100">
loading	Menentukan cara gambar di-load	<img src="gambar.jpg" alt="Deskripsi gambar" loading="lazy">

B. Audio

Elemen <audio> digunakan untuk menampilkan audio. Elemen ini memiliki tag penutup dan memiliki beberapa atribut, yaitu src, controls, dan autoplay. Atribut src digunakan untuk menentukan lokasi audio yang akan ditampilkan, controls digunakan untuk menampilkan kontrol audio, dan autoplay digunakan untuk memulai audio secara otomatis.

<audio controls>
  <source src="testing.mp3" type="audio/mpeg">
</audio>

Output :

Elemen <audio> juga memiliki beberapa atribut tambahan, yaitu :

Atribut	Deskripsi	Contoh
controls	Menampilkan kontrol audio	<audio src="audio.mp3" controls>
autoplay	Memulai audio secara otomatis	<audio src="audio.mp3" controls autoplay>
loop	Mengulang audio	<audio src="audio.mp3" controls loop>
muted	Mematikan suara audio	<audio src="audio.mp3" controls muted>
preload	Menentukan cara audio di-load	<audio src="audio.mp3" controls autoplay preload="auto">
volume	Menentukan volume audio	<audio src="audio.mp3" controls autoplay volume="0.5">
crossorigin	Menentukan cara mengakses audio	<audio src="audio.mp3" controls autoplay crossorigin="anonymous">
srcset	Menentukan audio alternatif	<audio src="audio.mp3" controls autoplay srcset="audio.mp3">
preload	Menentukan cara audio di-load	<audio src="audio.mp3" controls autoplay preload="auto">
autoplay	Memulai audio secara otomatis	<audio src="audio.mp3" controls autoplay>

Format audio yang didukung oleh elemen <audio> adalah mp3, ogg, dan wav. Kamu bisa menggunakan file example yang bisa diunduh disini

C. Video

Elemen <video digunakan untuk menampilkan video. Elemen ini memiliki tag penutup dan memiliki beberapa atribut yang sama dengan elemen <audio>, yaitu src, controls, dan autoplay.

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

Output :

Elemen <video> juga memiliki beberapa atribut tambahan, yaitu :

Atribut	Deskripsi	Contoh
controls	Menampilkan kontrol video	<video src="video.mp4" controls>
autoplay	Memulai video secara otomatis	<video src="video.mp4" controls autoplay>
loop	Mengulang video	<video src="video.mp4" controls loop>
muted	Mematikan suara video	<video src="video.mp4" controls muted>
preload	Menentukan cara video di-load	<video src="video.mp4" controls autoplay preload="auto">

Format video yang didukung oleh elemen <video> adalah mp4, ogg, dan webm. Kamu bisa menggunakan file example yang bisa diunduh disini

Penulis : Andika Tulus Pangestu