HTML5 Audio
Sebelum HTML5, file audio hanya bisa dimainkan di browser dengan plug-in (seperti flash).
Elemen <audio>
Elemen <audio> digunakan untuk menentukan bagaimana standar untuk memasukkan audio dalam sebuah halaman web. Oleh karena itu, untuk memutar file audio dalam halaman HTML, gunakan elemen <audio>.
Elemen <source> dalam HTML Audio
Elemen <source> digunakan untuk menentukan file audio alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format audio yang dikenali pertama kali.
Atribut controls
Atribut controls menambahkan audio kontrol seperti play, pause, dan volume.
Berikut adalah cara memasukkan audio dalam halaman web:
Contoh
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="nama_audio.ogg" type="audio/ogg">
<source src="nama_audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>Hasilnya:
Teks antara tag <audio> dan </audio> pada contoh di atas hanya akan ditampilkan dalam browser yang tidak mendukung elemen <audio>.Dukungan Browser
Pada tabel berikut terdapat angka-angka untuk menentukan versi browser yang mendukung sepenuhnya elemen <audio>.
| Elemen | Chrome | Firefox | IExplorer | Opera | Safari |
|---|---|---|---|---|---|
| <audio> | 4.0 | 3.5 | 9.0 | 10.5 | 4.0 |
Dalam HTML5, ada 3 format audio yang didukung, yaitu MP3, Wav, dan Ogg. Berikut adalah tabel yang menunjukkan dukungan browser untuk format audio yang berbeda.
| Browser | MP3 | Wav | Ogg |
| IE | ✓ |
✗ | ✗ |
| Chrome | ✓ |
✓ |
✓ |
| Firefox | ✓ |
✓ |
✓ |
| Safari | ✓ |
✓ |
✗ |
| Opera | ✓ |
✓ |
✓ |
HTML5 Video
Sebelum HTML5, video hanya bisa dimainkan di browser dengan plug-in (seperti flash).
Elemen <video>
Elemen <video>
Elemen <video> digunakan untuk menentukan standar dalam memasukkan video di halaman web. Oleh karena itu, untuk menampilkan video di halaman HTML, gunakan elemen <video>.
Elemen <source> dalam HTML Video
Elemen <source> dalam HTML Video
Elemen <source> memungkinkan kita untuk menentukan file video alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format yang dikenali pertama kali.
Atribut controls
Atribut controls
Atribut controls digunakan untuk menambahkan video kontrol seperti play, pause, dan volume. Sebaiknya kita selalu menyertakan atribut width dan height. Jika tinggi dan lebar tidak diatur, halaman mungkin berkedip saat video dimuat (loads).
Berikut adalah cara memasukkan video dalam halaman web:
Berikut adalah cara memasukkan video dalam halaman web:
Contoh
Hasilnya:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="nama_video.mp4" type="video/mp4">
<source src="nama_video.ogg" type="video/ogg">
</video>
</body>
</html>
Hasilnya:
Teks antara tag <video> dan </video> pada contoh di atas hanya akan ditampilkan browser yang tidak mendukung elemen <video>.
Atribut autoplay
Untuk memulai audio dan video secara otomatis menggunakan atribut autoplay.
Contoh
<!DOCTYPE html>
<html>
<body>
<audio src="nama_audio.mp3" autoplay="autoplay" hidden="hidden"></audio>
<video width="320" height="240" autoplay>
<source src="nama_video.mp4" type="video/mp4">
<source src="nama_video.ogg" type="video/ogg">
</video>
<p><b>Catatan:</b> Atribut autoplay tidak didukung di beberapa perangkat mobile.</p>
</body>
</html>Atribut autoplay tidak bekerja di perangkat mobile seperti iPad dan iPhone.
Dukungan Browser
Pada tabel berikut terdapat angka-angka untuk menentukan versi browser yang mendukung sepenuhnya elemen <video>.
| Elemen | Chrome | Firefox | IExplorer | Opera | Safari |
|---|---|---|---|---|---|
| <video> | 4.0 | 3.5 | 9.0 | 10.5 | 4.0 |
Dalam HTML5, ada 3 format video yang didukung, yaitu MP4, WebM, dan Ogg.
Berikut adalah tabel yang menjelaskan dukungan browser pada 3 format video.
| Browser | MP4 | WebM | Ogg |
| IE | ✓ | ✗ | ✗ |
| Chrome | ✓ | ✓ | ✓ |
| Firefox | ✓ | ✓ | ✓ |
| Safari | ✓ | ✗ | |
| Opera | ✓ | ✓ |
Demikian pembahasan mengenai audio dan video di HTML.
Bagikan
Belajar HTML Part 27 - Menambahkan Audio dan Video di HTML
4/
5
Oleh
Octavianus Hasan
Terimakasih kak atas ilmunya sangat bermanfaat dalam mengerjakan tugas saya, sukses terus dalam berkarya, tetap semangat dalam membagi ilmunya kak, perkenal kan nim saya 1922500129, nama saya gusti dinda permata dari kelompok SI2J, link website saya https;//www.atmaluhur.ac.id . terimakasih kak
BalasHapusYa sama-sama. Terima kasih atas kunjungannya.
Hapus