Picture, Video dan Audio ~ Pemrograman dan Teknologi

HTML menyediakan beberapa tag untuk menampilkan beberapa jenis media. Salah satunya adalah tag <img> yang bisa digunakan untuk menampilkan gambar. Selain gambar, kita juga bisa menambahkan video dan musik ke dalam tampilan HTML. Beberapa tag yang bisa kalian gunakan untuk menampilkan media selain tag <img> bisa kalian lihat di bawah ini.

<audio> : memperdengarkan musik / audio.
<video> : menampilkan video
<picture> : menampilkan gambar

Ketiga tag tersebut sama-sama perlu satu tag <source> atau lebih di dalamnya. Kegunaan tag source adalah untuk menyediakan beberapa file yang berbeda sebagai bagian dari kompatibilitas untuk perangkat yang berbeda-beda. Sebelum adanya tag audio dan video, file-file selain gambar ditampilkan dengan tag <object>. Walaupun sudah tag khusus untuk video dan audio, tapi tag <object> masih diperlukan untuk menampilkan beberapa media lain seperti pdf, vector, 3d, dll.

Video

Sebelum kita mulai mengetik kode HTML, buat satu folder kosong dan isi dengan file video mp4. Kalau tidak ada, boleh juga video dengan format ogg.

Kalau sudah ada file videonya, beri nama videoku.mp4. Selanjutnya, ketik kode HTML berikut ini di text editor!

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <video width="auto" height="auto" autoplay controls loop>
        <source src="videoku.mp4" type="video/mp4">
        <source src="videoku.ogg" type="video/ogg">
        Tidak mendukung tag &lt;video&gt;
    </video>
</BODY>
</HTML>




Jika browser tidak mendukung penggunaan tag <video>, maka yang akan muncul adalah "Tidak mendukung tag <video>". Jika browser bisa menampilkan video dengan tag <video>, maka tampilannya akan berisi salah satu video yang namanya menjadi nilai atribut "src" pada tag <source>. Jika semua video yang disebutkan pada semua tag <source> ada, maka video pertama yang akan diputar saat tombol "play" atau tombol "segitiga ke kanan" ditekan.

Sebelum HTML5, tag yang digunakan untuk menampilkan video adalah tag <object>, dan itupun harus menggunakan plugin seperti flash. Saat ini, tag video sudah bisa memutar 3 jenis format video yang bisa disebutkan jenisnya pada atribut type, yaitu :
mp4 => video/mp4
ogg => video/ogg
webm => video/webm
Audio
Selanjutnya kita akan menggunakan tag <audio> untuk menampilkan tampilan "audio player". Perbedaan tag <audio> dan <video> hanya pada penggunaan atribut "width" dan "height". Tag <audio> tidak memerlukan kedua atribut tersebut karena yang dimainkan hanya suara atau musik.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <audio autoplay controls loop>
        <source src="musik.mp3" type="audio/mp3">
        <source src="musik.ogg" type="audio/ogg">
        Tidak mendukung tag &lt;audio&gt;
    </audio>
</BODY>
</HTML>

Jika kalian membandingkan contoh-contoh kode HTML di atas, tidak ada perbedaan dalam pola penulisan tag <video> dan <audio>. Keduanya sama-sama mengapit satu atau beberapa tag <source>. Masing-masing tag <source> juga memiliki atribut "src' dan "type". Bedanya ada di atribut width dan height yang hanya digunakan di tag video.

Atribut
Atribut yang bisa digunakan pada tag audio dan video, yaitu :
autoplay
controls
loop
Atribut autoplay digunakan untuk memainkan video dan audio secara otomatis saat halaman dibuka. Atribut controls digunakan untuk menampilkan tombol-tombol yang terkait dengan "playback" tersebut seperti play, pause, dll. Dan..., atribut loop digunakan untuk mengulang video secara otomatis setiap video selesai dimainkan.

Untuk tag <audio>, nilai atribut type pada tag <source> bisa berupa :
audio/mp3 => mpeg
audio/ogg => ogg
audio/wav => wav
Picture

Ada satu tag yang kegunaannya cukup mirip dengan tag <audio> dan tag <video>. Tag tersebut adalah tag <picture>. Kesamaannya adalah adanya tag <source> di dalamnya. Kegunaan tag picture sama dengan tag <img>. Bedanya, kita bisa menyediakan beberapa gambar yang berbeda untuk resolusi dan orientasi layar yang berbeda-beda. Selain itu, kita juga bisa menggunakan file dengan format yang berbeda-beda.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <picture>
        <source src="gambarku.png" media="(max-width: 767px)">
        <source src="gambarku.jpeg" media="(min-width: 767px)">
        Tidak mendukung tag &lt;picture&gt;
    </picture>
</BODY>
</HTML>

Penggunaan atribut media sama dengan penggunaan media query pada CSS. Untuk saat ini, abaikan saja atribut tersebut. Minimal, saat ini kalian seharusnya sudah tahu cara paling sederhana untuk menggunakan tag tersebut.

Beberapa browser mungkin belum mendukung salah satu atau semua tag di atas. Sebagai alternatif, kalian masih bisa menggunakan tag <img> dan <object>.