Audio & Video HTML5
Multimedia Tanpa Plugin
Salah satu inovasi terbesar dalam HTML5 adalah kemampuan menanamkan berkas Audio dan Video secara langsung ke dalam web tanpa membutuhkan plugin pihak ketiga (seperti Flash Player yang kini sudah usang).
1. Elemen Video (<video>)
Elemen <video> digunakan untuk menayangkan video di halaman web.
Sintaks Dasar:
<video src="video-tutorial.mp4" controls width="640" height="360">
Browser Anda tidak mendukung pemutaran video HTML5.
</video>
Menggunakan Tag <source> (Multi Format Support)
Setiap browser mendukung format video yang berbeda-beda. Penggunaan elemen <source> memungkinkan kita menyediakan beberapa format video sebagai cadangan (fallback).
<video controls width="640" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Browser Anda tidak mendukung tag video HTML5.
</video>
Atribut Penting Elemen <video>:
| Atribut | Fungsi |
|---|---|
controls |
Menampilkan kontrol pemutar (tombol play/pause, volume, fullscreen) |
autoplay |
Memutar video secara otomatis saat halaman dimuat |
muted |
Mematikan suara video (mute) |
loop |
Memutar ulang video secara otomatis setelah selesai |
poster |
Menentukan gambar pratinjau (thumbnail) sebelum video diputar |
preload |
Menentukan strategi pemuatan video (auto, metadata, none) |
Catatan Autoplay: Sebagian besar browser modern memblokir video dengan atribut
autoplaykecuali disandingkan dengan atributmuted.<video autoplay muted loop controls> <source src="background.mp4" type="video/mp4"> </video>
2. Elemen Audio (<audio>)
Elemen <audio> digunakan untuk memutar musik atau pemutaran rekaman suara.
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
<source src="musik.ogg" type="audio/ogg">
Browser Anda tidak mendukung elemen audio HTML5.
</audio>
Atribut Elemen <audio>:
Atribut pada <audio> mirip dengan elemen video: controls, autoplay, loop, muted, preload.
3. Subtitle & Keterangan (<track>)
HTML5 mendukung penambahan subtitel atau teks deskripsi pada video menggunakan tag <track> dan berkas berkstensi .vtt (WebVTT).
<video controls width="640">
<source src="film.mp4" type="video/mp4">
<track src="subtitel-id.vtt" kind="subtitles" srclang="id" label="Bahasa Indonesia" default>
</video>
