Cara Menambahkan Multimedia dengan HTML

Seperti yang kita ketahui, dalam bahasa pemrograman HTML itu dapat memasukkan atau menyisipkan media baik berupa gambar, audio bahkan video. Salah satu cara untuk melakukan ini, yaitu dengan cara source langsung.

Pada cara ini kalian harus membuat folder dengan nama multimedia. Buat lagi 3 folder yang masing-masing berisi gambar, audio, dan video. Selanjutnya pilih multimedia yang akan disisipkan pada web HTML. Setelah itu copy file multimedia contoh jika yang dipilih gambar maka copy ke folder gambar.

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).

Berikut contoh sintaks yang dapat digunakan untuk menyisipkan multimedia ke web HTML:

1. Menyisipkan Video

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>
<source src="video/Video1.MP4">
</video>

Ada beberapa tambahan controls didalam video ini fungsinya untuk menampilkan tombol control seperti play, pause, dsb. Jika ingin memanggil video dari link maka ubah Video1.mp4 nya dengan URL video tersebut. Jika video berada didalam beberapa folder misalnya folder video -> 1 ->Video1.mp4 maka panggil semua direktorinya (video/1/Video1.mp4) jangan lupa masukkan juga format video misalnya .mp4.

2. Menyisipkan Gambar di HTML

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

<img src="gambar/images(31).jpg">

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 images(31).jpg Maka pemanggilannya akan seperti ini:

<img src="gambar/images(31).jpg">

gambar disini adalah nama folder direktori yang perlu dilewati sebelum memanggil gambar.png. Begitu juga jika gambar tidak didalam folder (sejajar dengan file HTML tempat dimana menyisipkan kode tersebut) tidak perlu menggunakan gambar/ langsung saja images(31).jpg.

Sebaliknya, jika berada didalam beberapa folder misalnya gambar terdapat didalam folder gambar -> 1 -> asli maka harus dipanggil semua direktorinya (gambar/1/asli/images(31).jpg).

3. Menyisipkan Audio di HTML

Untuk memasukkan Audio atau  MP3 di HTML, gunakan tag <audio> dan <source>, misalnya seperti ini:

<audio> <source src="audio/Audio1.MP3"> </audio>

Seperti pada video di audio juga 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).

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