CARA MENYISIPKAN MEDIA (GAMBAR, AUDIO, VIDEO) KE TAG HTML

Kumpulan Tag HTML5 Untuk Menyisipkan Media (Gambar, Audio, Video)

Seperti yang kita ketahui, dalam bahasa pemrograman HTML itu dapat memasukkan / menyisipkan media baik berupa gambar, audio bahkan video. Terdapat 2 cara untuk melakukan ini, yaitu dengan cara embed (menyematkan) dan source langsung.

Menyisipkan Media Dengan Cara Embed (Penyematan)
Ini merupakan cara yang dilakukan untuk menyematkan media dari pihak ketiga misalnya YouTube, cara ini diawali dengan tag <iframe>. Untuk menggunakan cara ini tentu harus mempersiapkan media di pihak ketiga terlebih dahulu dan code penyematannya berbeda-beda tergantung pihak ketiga tersebut. Silahkan kunjungi pihak ketiga dan klik Embed untuk menggunakan cara ini.

Contohnya pada YouTube, ketika klik Embed / Sematkan pada video yang ingin disematkan maka akan muncul code <iframe> kemudian disalin dan tempelkan di situs HTML pada bagian dimana ingin menampilkan video sematan tersebut.

Menyisipkan Media Dengan Source
Cara ini dilakukan dengan cara memanggil link file yang bersangkutan kemudian ditambahkan tag HTML yang sesuai misalnya untuk gambar menggunakan <img>, untuk audio menggunakan <audio>, untuk video menggunakan <video>. Didalam tag-tag tersebut perlu dipanggil sumber medianya / source nya dengan src=”” (berupa link / berupa nama file di localhost).

Catatan: Dalam pemanggilan media di HTML perlu memasukkan jenis file / ekstensinya juga misalnya .png, .jpg, .mp3, .mp4, dll.

Mari bahas satu persatu.

#1 Menyisipkan Gambar di HTML

Gunakan <img src=””> dalam memanggil media gambar, misalnya seperti ini:

<img src="https://snag.gy/yT0mOb.jpg">
https://snag.gy/yT0mOb.jpg merupakan sumber / source gambar yang akan ditampilkan (link / online), tentu merupakan source online karena berupa link dan gambar akan muncul jika ada koneksi internet (online) karena menyisipkan gambar dengan URL.

Bisa juga dilakukan dengan sumber lokal / local source, yaitu menyimpan gambarnya di folder terlebih dahulu kemudian panggil via direktori. Misalnya terdapat file HTML dan folder images, dalam folder images tersebut terdapat gambar dengan nama contohgambar.png. Maka pemanggilannya akan seperti ini:

<img src="images/contohgambar.png">
images disini adalah nama folder direktori yang perlu dilewati sebelum memanggil contohgambar.png. Begitu juga jika gambar tidak didalam folder (sejajar dengan file HTML tempat dimana menyisipkan kode tersebut) tidak perlu menggunakan images/ langsung saja contohgambar.png. Sebaliknya, jika berada didalam beberapa folder misalnya gambar terdapat didalam folder images -> logo -> asli maka harus dipanggil semua direktorinya (images/logo/asli/contohgambar.png).

#2 Menyisipkan Audio di HTML

Untuk memasukkan Audio / Musik / Suara lainnya di HTML, gunakan tag <audio> dan <source>, misalnya seperti ini:

<audio controls>
  <source src="contohaudio.mp3" type="audio/mp3">
</audio>
Ada tambahan controls didalam tag <audio> fungsinya untuk menampilkan control tombol play / pause, dsb. Pada bagian <source src=””> masukkan file musik beserta ekstensinya misalnya .mp3 dan tambahkan juga type=”audio/mp3″ jika musik tersebut berupa mp3. Jiak tidak ingin menggunakan control cukup hilangkan / hapus controls didalam <audio>.

Itu adalah contoh audio di direktori lokal, jika audio diambil dari URL / link maka ganti contohaudio.mp3 dengan link dimana file musik itu berada. Sama juga seperti pemanggilan gambar di direktori lokal, jika audio berada didalam beberapa folder misalnya di folder musik -> pop -> contohaudio.mp3 maka panggil semua direktorinya (musik/pop/contohaudio.mp3).

#3 Menyisipkan Video di HTML

Sudah banyak sekali yang menyisipkan video dengan cara embed dari pihak ketiga karena tampilannya lebih menari dibanding HTML biasa. Tapi untuk HTML saya rasa tidak kalah menarik karena sudah memiliki full control seperti tombol play, pause, fullscreen, dsb. Untuk menyisipkan video di HTML gunakan tab <video> dan <source> tidak berbeda jauh dengan menyisipkan audio:

<video controls>
  <source src="contohvideo.mp4" type="video/mp4">
</video>
Sama seperti audio, ada tambahan controls didalam video ini fungsinya untuk menampilkan tombol control seperti play / pause / dsb. Jika ingin memanggil video dari link maka ubah contohvideo.mp4 nya dengan URL video tersebut. Jika video berada didalam beberapa folder misalnya folder video -> videosaya -> contohvideo.mp4 maka panggil semua direktorinya (video/videosaya/contohvideo.mp4) jangan lupa masukkan juga ekstensi videonya misalnya .mp4.

Kustomisasi
Dalam tag-tag diatas bisa disesuaikan sesuai kebutuhan, misalnya pada audio dan video jika ingin dibuat autoplay (langsung mulai ketika audio / video tersebut muncul dilayar tanpa perlu klik tombol play) silahkan tambahkan autoplay didalam tag <audio> / <video>. Contoh: <video controls autoplay>.

Jika ingin dibuat perulangan / loop (video / audio akan kembali memutar kebagian awal setelah musik / video habis) tambahkan loop didalam tag <audio> / <video>. Contoh: <video controls loop>.

Begitu juga untuk gaya / style pada tampilan gambar, audio dan video bisa ditambahkan didalam tag <img> / <audio> / <video> misalnya menambahkan lebar / tinggi tampilan. Hal ini disebut CSS Inline, lihat disini (bagian CSS Inline) untuk mengetahui lebih lanjut tentang penggunaan CSS Inline.

Kesimpulan
Tag-tag diatas merupakan tag dari HTML5, jika menggunakan HTML versi lain bisa saja tag tersebut tidak berfungsi dengan baik atau tampilannya lebih jadul. Tag-tag HTML5 tersebut bisa dijalankan di semua browser modern, jika tag yang dimasukkan tidak berfungsi silahkan cek di browser lain / coba perbarui versi browser yang digunakan ke versi terbaru.

Selamat mencoba !