Assalamu'alaikum poinreaders,
Audio dan video tag menunjukkan sebuah file berupa audio dan video yang dapat disisipkan pada halaman web, sehingga dapat diputar/dimainkan. Untuk lebih jelasnya, yuk langsung saja simak ulasannya...
Audio dan video tag menunjukkan sebuah file berupa audio dan video yang dapat disisipkan pada halaman web, sehingga dapat diputar/dimainkan. Untuk lebih jelasnya, yuk langsung saja simak ulasannya...
1. <audio>
Fungsi :
Fungsi :
Mendefinisikan konten suara.
Format Penulisan :
<audio>...</audio>
Format File :
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| autoplay | autoplay | optional | Audio akan otomatis diputar. |
| controls | controls | optional | Menampilkan kontrol audio. |
| loop | loop | optional | Memutar ulang audio. |
| muted | muted | optional | Meredam audio. |
| preload | auto metada none |
optional | Menentukan bagaimana audio akan dimuat ketika halaman web dimuat. |
| src | URL | wajib | Menentukan URL file audio. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag audio</title>
</head>
<body>
Autumun Sunset<br>
Music by <a href="http://audionautix.com">audionautix.com</a>
<br>
<audio controls>
<source src="audio/AutumnSunset.mp3" type="audio/mpeg">
Maaf, browser anda tidak support tag audio.
</audio>
</body>
</html>
2. <source>
Fungsi :
Mendefinisikan sumber media untuk tag <video> maupun <audio>.Format Penulisan :
<source>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| media | media_query | optional | Menentukan jenis sumber media. |
| src | URL | wajib | Menentukan URL file media. |
| type | media_type | optional | Menentukan jenis media dari sumber media. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag source</title>
</head>
<body>
Autumun Sunset<br>
Music by <a href="http://audionautix.com">audionautix.com</a>
<br>
<audio controls>
<source src="audio/AutumnSunset.mp3" type="audio/mpeg">
Maaf, browser anda tidak support tag audio.
</audio>
</body>
</html>
3. <track>
Fungsi :
Mendefinisikan teks track untuk tag <video> maupun <audio>.Format Penulisan :
<track>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| default | default | optional | Track akan diaktifkan jika preferensi pengguna tidak menunjukkan track lian yang lebih sesuai. |
| kind | captions chapters descriptions metada subtitles |
optional | Menentukan jenis teks track. |
| label | text | optional | Menentukan judul teks track. |
| src | URL | wajib | Menentukan URL file track. |
| srclang | language_code | optional | Menentukan bahasa teks track. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag track</title>
</head>
<body>
<video width="720" controls>
<source src="video/pointopoin.mp4" type="video/mp4">
<track label="Indonesian" kind="subtitles" srclang="id" src="video/sub.vtt" kind="subtitles">
</video>
</body>
</html>
4. <video>
Fungsi :
Mendefinisikan sebuah video atau film.Format Penulisan :
<video>...</video>
Format File :
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| autoplay | autoplay | optional | Video akan otomatis diputar. |
| controls | controls | optional | Menampilkan kontrol video. |
| height | pixels | optional | Menetapkan ketinggian pemutar video. |
| loop | loop | optional | Memutar ulang video. |
| muted | muted | optional | Meredam audio video. |
| poster | URL | optional | Menentukan thumbnail/gambar video. |
| preload | auto metada none |
optional | Menentukan bagaimana video akan dimuat ketika halaman web dimuat. |
| src | URL | wajib | Menentukan URL file video. |
| width | pixels | optional | Menetapkan lebar pemutar video. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag video</title>
</head>
<body>
<video width="720" controls>
<source src="video/pointopoin.mp4" type="video/mp4">
Maaf, browser anda tidak support tag video.
</video>
</body>
</html>
Semoga materi yang saya sampaikan kali ini dapat bermanfaat bagi sobat poinreaders, jangan lupa follow akun sosial kami agar sobat poinreaders bisa mendapatkan materi terupdate tentang pemrograman lainnya.