Cara menambahkan gambar video pada Html

Baca Juga

Cara menambahkan gambar dan video pada Html - Setelah saya membagikan cara menambah audio pada html kemarin, sekarang saya membagikan caranya menambah gambar dan video pada html. Dan cara inipun sama dengan cara yang menambah audio.

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


Menyisipkan Media Dengan Cara Embed (Penyematan)

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.


1. Menyisipkan Gambar di HTML

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

<img src="https://4hmadtutorial.jpg">

https://4hmadtutorial.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 "contoh.png". Maka pemanggilannya akan seperti ini:

<img src="image/contoh.png">

Image disini adalah nama folder direktori yang perlu dilewati sebelum memanggil contoh.png. Begitu juga jika gambar tidak didalam folder (sejajar dengan file HTML tempat dimana menyisipkan kode tersebut) tidak perlu menggunakan images/ langsung saja contoh.png. Sebaliknya, jika berada didalam beberapa folder misalnya gambar terdapat didalam folder images -> image2 -> image3 maka harus dipanggil semua direktorinya (images/image2/image3/contoh.png).


2. 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 / dan segagainya. Jika ingin memanggil video dari link maka ubah contoh.mp4 nya dengan URL video tersebut. Jika video berada didalam beberapa folder misalnya folder video -> videocontoh -> videocontoh2.mp4 maka panggil semua direktorinya (video/videocontoh/videocontoh2.mp4) jangan lupa masukkan juga ekstensi videonya misalnya .mp4.

Tambahan

Pada tagdiatas bisa disesuaikan sesuai kebutuhan, misalnya pada audio dan video jika ingin dibuat autoplay (langsung mulai ketika video tersebut muncul dilayar tanpa perlu klik tombol play) silahkan tambahkan autoplay didalam tag <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 dan video bisa ditambahkan didalam tag  <video> misalnya menambahkan lebar / tinggi tampilan. Hal ini disebut CSS Inline, lihat disini (bagian CSS Inline) untuk mengetahui lebih lanjut tentang penggunaan CSS Inline.

Note*Tag diatas merupakan tag dari HTML5, jika menggunakan HTML versi lain bisa saja tag tersebut tidak berfungsi dengan baik. 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.

Cukup sekian untuk tutorial kali ini, tetap jangan lupa untuk mampir ke postingan yang lainnya.

Temukan solusimu di 4hmadtutorial