Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar HTML5 Bagian 22 : Struktur Dokumen Pada HTML5, selanjutnya kita akan mempelajari cara menyematkan file video & audio di HTML.
HTML5 memiliki fitur dukungan memainkan audio dan video tanpa memerlukan file Flash.
Tag <audio> dan <video> HTML5 memudahkan untuk menambahkan media ke web.
Anda tinggal mengatur atribut src untuk mengidentifikasi sumber media dan menyertakan atribut control sehingga pengguna dapat memutar dan menjeda media.
Menyematkan Video
Berikut adalah susunan kode sederhana dari menyematkan file video di halaman web Anda, pada contoh saya akan menggunakan video yang berasal dari Youtube :
<video src = "foo.mp4" width = "300" height = "200" controls> Browser Anda tidak mendukung elemen <video>. </video>
Spesifikasi draf HTML5 saat ini tidak menentukan format video mana yang harus didukung browser di tag video. Tetapi format video yang paling umum digunakan adalah –
- Ogg – File Ogg dengan codec video Thedora dan codec audio Vorbis.
- mpeg4 – File MPEG4 dengan codec video H.264 dan codec audio AAC.
Anda dapat menggunakan tag <source> untuk menentukan media dengan jenis media dan banyak atribut lainnya.
Elemen video mengizinkan beberapa elemen sumber dan browser akan menggunakan format pertama yang dikenali :
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "https://static.mailster.co/videos/mailster_editor.mp4" type = "video/mp4" />
Browser Anda tidak mendukung elemen <video>.
</video>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Spesifikasi Atribut Video
Tag video HTML5 dapat memiliki sejumlah atribut untuk mengontrol tampilan dan nuansa serta berbagai fungsi kontrol :
| No. | Atribut & Deskripsi |
| 1 | autoplay Atribut ini digunakan jika kita ingin video diputar secara otomatis, segera setelah data video dimuat ke browser. |
| 2 | autobuffer Atribut ini digunakan jika kita ingin membuat video secara otomatis memulai buffering meskipun tidak disetel untuk diputar secara otomatis. |
| 3 | control Atribut ini berfungsi untuk menampilkan tombol control seperti, play, pause, volume pada tampilan video. |
| 4 | height Atribut ini menentukan tinggi area tampilan video. |
| 5 | loop Atribut ini berfungsi untuk memainkan kembali file video dari awal ketika video sudah habis ditayangkan. |
| 6 | preload Atribut berfungsi untuk menetapkan bahwa video akan dimuat saat halaman dimuat, dan siap dijalankan. Atribut ini akan diabaikan jika kita menggunakan atribut autoplay. |
| 7 | poster Atribut ini berfungsi untuk menampilkan gambar, poster video ketika file video belum dimainkan. |
| 8 | src Atribut ini berisi alamat URL video yang akan disematkan. |
| 9 | width Atribut ini menentukan lebar area tampilan video. |
Menyematkan Audio
HTML5 mendukung tag <audio> yang digunakan untuk menyematkan konten suara dalam dokumen HTML atau XHTML sebagai berikut.
<audio src = "https://mbahwp.com/wp-content/uploads/2021/02/audio.wav" controls autoplay> Browser Anda tidak mendukung elemen <audio>. </audio>
Spesifikasi draf HTML5 saat ini tidak menentukan format audio yang harus didukung browser di tag audio. Tetapi format audio yang paling umum digunakan adalah ogg, mp3 dan wav.
Anda dapat menggunakan <source> tag untuk menentukan media dengan jenis media dan banyak atribut lainnya.
Elemen audio memungkinkan beberapa elemen sumber dan browser akan menggunakan format pertama yang dikenali.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "https://mbahwp.com/wp-content/uploads/2021/02/audio.wav" type = "audio/wav" />
Browser Anda tidak mendukung elemen <audio>.
</audio>
</body>
</html>
Ini akan menghasilkan hasil sebagai berikut :
Spesifikasi Atribut Audio
Tag audio HTML5 dapat memiliki sejumlah atribut untuk mengontrol tampilan dan nuansa serta berbagai fungsi kontrol :
| No. | Atribut & Deskripsi |
| 1 | autoplay Atribut ini berfungsi untuk memutar audio secara otomatis begitu file audio dimuat di browser. |
| 2 | autobuffer Atribut ini digunakan jika kita ingin membuat audio secara otomatis memulai buffering meskipun tidak disetel untuk diputar secara otomatis. |
| 3 | control Atribut ini berfungsi untuk menampilkan tombol control seperti, play, pause, volume pada tampilan audio. |
| 4 | loop Atribut ini berfungsi untuk memainkan kembali file video dari awal ketika audio sudah habis ditayangkan. |
| 5 | preload Atribut berfungsi untuk menetapkan bahwa audio akan dimuat saat halaman dimuat, dan siap dijalankan. Atribut ini akan diabaikan jika kita menggunakan atribut autoplay. |
| 6 | src Atribut ini berisi alamat URL audio yang akan disematkan. |
Semoga tutorial ini membantu Anda untuk mempelajari cara menyematkan file video & audio di HTML lengkap dengan penggunaan atributnya dalam dokumen.
