Cara Menyisipkan Media (Video, Audio, dan Gambar) dengan HTML

Cara Menyisipkan Media (Video, Audio, dan Gambar)

Pada sebuah halaman web, pasti ada video, audio dan juga gambar bukan?. Mengapa demikian? karena video dapat membuat sebuah blog menjadi semakin menarik. Video juga dapat memperbanyak pengunjung sehingga blog kita semakin berkembang. Apalagi jika blog itu sendiri dilengkapi dengan gambar ataupun audio yang baik. Secara otomatis pengunjung akan tertarik bahkan penasaran dengan blog kita sendiri sehingga mereka akan terus-menerus melihat atau mengupdate isi dari blog kita. Namun, lebih baik memposting video, gambar, atau audia yang bermanfaat bagi semua orang.

Oleh karena itu, ada cara tersendiri untuk memasukkan gambar, audio, ataupun video itu. Disini saya akan memposting cara memasukan video, gambar, dan audio dalam HTML. Dalam proses ini kita akan  menggunakan Sublime.

Menyisipkan Gambar:

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

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:

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

Menyisipkan Audio:

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

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

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:

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.

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.

Tag-tag diatas merupakan tag dari HTML5, jika menggunakan HTML versi lain bisa saja tag tersebut tidak berfungsi dengan baik atau tampilannya lebih jadul. 

Selamat mencoba dan terima kasih :)