HTML5 Multimedia

TAMPILAN FORMAT MULTIMEDIA PADA HTML5
Tujuan Kegiatan
1. Menjelaskan tag untuk tampilan gambar dalam halaman web
2. Menjelaskan tag untuk tampilan audio dalam halaman web
3. Menjelaskan tag untuk tampilan video dalam halaman web
1. Memasukkan Gambar
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit
menjemukan bila tidak disertai dengan gambar. Saat ini, halaman web yang
ada di internet hampir semuanya memasukkan unsur gambar, animasi,
bahkan audio dan video untuk menarik dan membuat tercengang para
pengunjungnya.
Cara yang diperlukan untuk menambahkan gambar ke dalam suatu
halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk
keperluan ini, yaitu tag <img>. Tag ini merupakan tag tunggal atau tidak
memiliki pasangan, artinya tidak diperlukan ada tag penutup </image>.
Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang
berisi file gambar yang akan ditampilkan ke dalam web. bentuk umum dari
penggunaan tag <img> adalah sebagai berikut
<img src=”nama file” alt=”keterangan”>
Sebelum memulai kegiatan ini, buka kembali folder yang telah kalian
buat pada pertemuan sebelumnya, kemudian untuk kegiatan hari ini buatlah
folder baru di dalam folder tadi dengan nama folder: latmultimedia
Setelah membuat folder latmultimedia, simpanlah sebuah gambar di
folder tersebut dengan ekstensi/format .png/ .jpeg dan diberi nama: gambar1
Setelah semua persiapan tadi telah selesai, bukalah VS Code dan open
folder latmultimedia, kemudian buatlah sebuah file html dengan nama
insertgambar.html
Dengan menggunakan VS Code, butlah code berikut pada file
insertgambar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Memasukkan Gambar</title>
</head>
<body>
<h3>Contoh memasukkan gambar dengan tag img</h3>
<img src="gambar1.png" alt="gambar1">
</body>
</html>
Setelah disimpan, buka browser dan lihat hasilnya.
Pada kode <img src="gambar1.png" alt="gambar1"> akan ada

pemanggilan gambar dengan nama gambar.1png sedangkan atribut alt pada
kode di atas merupakan deskripsi tertulis singkat dari suatu gambar. Atribut
alt diperlukan untuk memberikan teks alternatif untuk sebuah gambar, jika
karena alasan tertentu tidak dapat melihat gambar (karena koneksi yang
lambat, kesalahan pada atribut src, atau jika pengguna menggunakan
pembaca layar) maka, atribut alt akan menggantikan gambarnya.
Selanjutnya scr pada kode di atas menunjukkan lokasi gambar berada
di folder yang sama dengan halaman saat ini. Bagaimana jika gambar berada
di folder yang berbeda? disini kita mengenal istilah path file. Path File
menjelaskan lokasi file dalam struktur folder pada sebuah situs web. Path File
dapat digunakan pada saat sebuah situs web ingin menautkan ke file
eksternal, seperti: Halaman web, gambar, Stylesheet, JavaScripts
A. Path Absolute
Path file absolute menunjukan URL lengkap atau jalur lengkap
menuju sebuah file. Untuk membuat path ini, kalian carilah sebuah
gambar di Internet kemudian copy alamatnya/ Copy Image Link
Setelah copy image link, kemudian buatlah kode berikut. Pada img
src kalian bisa paste link yang sudah di copy sebelumnya
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
</head>
<body>
<h3>memasukkan gambar dengan path absolute</h3><br />
<img src="https://icon-library.com/images/html5-icon/html5-icon-
0.jpg" alt="html5">
</body>
</html>
Setelah disimpan, buka browser dan lihat hasilnya.

B. Path Relative
a) <img src=”images/picture.jpg”>
Path di atas akan menuju ke file bernama picture.jpg yang berada
di folder image di dalam folder saat ini. Untuk itu buatlah sebuah sub
folder dengan nama pic di dalam folder latmultimedia. Kemudian
letakkan sebuah file gambar di folder pic dengan nama bebek format
.png atau .jpeg
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<h3>memasukkan gambar dengan path relative</h3><br />
<img src="pic/bebek.jpg" alt="gambar bebek">
</body>
</html>
Hasilnya Gambar akan diambil dari folder bernama pic, yang

berada didalam folder latmultimedia. Dimana, folder latmultimedia juga
merupakan tempat disimpannya file halaman web tersebut.
b) <img src=”../picture.jpg”>
Path di atas akan menuju ke file bernama picture.jpg yang berada
di folder image di satu tingkat di atas folder saat ini. Untuk itu buatlah
sebuah di atas folder latmultimedia kemudian diberi nama gambar.
Semudian letakkan sebuah file gambar di folder gambar dengan nama
bebek format .png atau .jpeg
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<h3>memasukkan gambar dengan path relative</h3><br />
<img src="../gambar/3310.jpg" alt="3310">
</body>
</html>
Hasilnya Gambar akan diambil dari folder bernama gambar, yang

berada di atas folder latmultimedia. Dimana, folder latmultimedia juga
merupakan tempat disimpannya file halaman web tersebut.
C. Ukuran Gambar - Lebar dan Tinggi
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
</head>
<body>
<h2>Mengatur tinggi dan lebar gambar</h2><hr />
<p>
Gambar pertama menggunakan gambar dengan ukuran aslinya
</p><br />
<img
src="https://belajar.smkn1mas.sch.id/pluginfile.php/1/core_admin/
logocompact/300x300/1656369878/unnamed.jpg" alt="Logo
Stikmas"><br />
<p>
Gambar kedua menggunakan atribut width dan height untuk
menentukan tinggi dan lebarnya menjadi 130 piksel
</p><br />
<img
src="https://belajar.smkn1mas.sch.id/pluginfile.php/1/core_admin/
logocompact/300x300/1656369878/unnamed.jpg" alt="Logo Stikmas"
width="130px" height="130px">
</body>
</html>
Hasilnya sebagai berikut. Gambar pertama menggunakan gambar
dengan ukuran aslinya. Gambar kedua menggunakan atribut width dan
height untuk menentukan tinggi dan lebarnya menjadi 130 piksel
2. Memasukkan Audio
Konten dalam web, tidak hanya dalam bentuk teks dan gambar saja,
tapi juga bisa dalam bentuk multimedia seperti audio. Sebelum adanya HTML
5, audio di HTML ditambahkan dengan program eksternal seperti flash player.
Namun, kini HTML sudah punya tag sendiri yakni tag <audio>.
Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa
memberikan file audio yang akan diputar dengan tag <source> serta
mengaktifan tombol kontrol seperti play pause stop start dengan
menambahkan tag <controls>.
Apabila browser yang digunakan belum mendukung tag <audio> kita

bisa menambahkan keterangan atau teks seperti: browser tidak mendukung
tag audio.
Sebelum lanjut ke latihan, buatlah sebuah folder baru di dalam folder
latmultimedia dengan nama folder audio. Selanjutnya letakkan sebuah file
audio di dalam folder audo dengan nama file lagu1 format .mp3
Selanjutnya pada folder latmultimedia buatlah sebuah file html dengan
nama audio.html kemudian masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Audio</title>
</head>
<body>
<h1>Memasukkan audio ke web</h1><br />
<audio controls>
<source src="audio/lagu1.mp3" type="audio/mpeg">
Browser yang kamu pakai belum support audio
</audio>
</body>
</html>
Hasilnya seperti tampilan di atas. Pada tombol kontrol, kita bisa

menekan play, pause, dan mengatur besar kecilnya volume, serta mengatur
posisi play pada track. Kemudian kita juga bisa memasukan file audio melalui
website berbeda dengan menyalin/copy link lokasi dari file audio tersebut
kemudian paste pada bagian <source src=”paste disini”> seperti latihan
insert gambar di atas.
Audio player di HTML tidak mendukung semua jenis format file audio.
Berikut ini beberapa daftar format file audio yang bisa diputar di HTML
Format Container MIME type
PCM WAV audio/wav
MP3 MP3 audio/mpeg
AAC MP4 audio/mp4
AAC AAC audio/aac
Vorbis Ogg audio/ogg
Opus WebM audio/webm
FLAC FLAC audio/flac
Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A),
karena ukuran filenya relatif kecil. Sementara format FLAC adalah format file
audio dengan kualitas tinggi dan ukuran filenya relatif lebih besar.
Atribut Pada Tag <audio>

Tag <audio> punya beberapa atribut yang sering digunakan:
1. <controls>
Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti
tombol play, pause, stop, scroll, dan volume). Contohnya sama seperti
pada latihan sebelumnya
<audio controls>
</audio>
2. <autoplay>
Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai
yang bisa diberikan pada atribut ini adalah true dan false. Nilai true
artinya kita akan memutar audio secara otomatis, dan false artinya
audio tidak akan diputar secara otomatis. Jika nilai yang diinginkan
adalah true maka boleh tidak ditulis.
<audio autoplay>
</audio>
Atribut ini mungkin saja tidak akan bekerja pada Google Chrome,
karena ada perubahan policy (kebijakan) dalam memutar audio secara
otomatis. Sedangkan untuk mozila firefox masih bisa bekerja dengan
mematikan block pada bagian permision
3. <loop>
Atribut loop berfungsi untuk mengulang-ulang pemutaran audio.
Ini seperti repeat one. Nilai yang bisa diberikan adalah true dan false.
<audio controls="true" loop="true">
</audio>
Dengan kode di atas, audio akan diputar kembali secara otomatis

begitu audio selesai dimainkan.
4. <muted>
Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa
diberikan adalah true dan false.
<audio controls="true" muted="true">
</audio>
Ketika dijalankan, broswer akan secara default memberikan
senyap atau mute pada bagian volume. Jika ingin menghilangkan
senyap bisa menaikkan volumenya melalui tombol controls.
3. Memasukkan Video
Sebelumnya, kita sudah belajar cara menambahkan gambar dan audio
di HTML. Namun, ini belumlah cukup karena sekarang konten di web tidak
hanya dalam bentuk teks, gambar dan audio saja. Konten lainnya yang bisa
ditambahkan di HTML adalah video.
Dulu sebelum ada HTML 5, media player di HTML dibuat dengan
program eksternal seperti adobe flash. Namum, kini sudah tidak dipakai lagi.
HTML sekarang punya tag baru untuk membuat media player, yakni tag
<video>.
Sebelum lanjut ke latihan, buatlah sebuah folder baru di dalam folder

latmultimedia dengan nama folder video. Selanjutnya letakkan sebuah file
video di dalam folder video dengan nama file video1 format .mp4 atau lainnya.
Selanjutnya pada folder latmultimedia buatlah sebuah file html dengan nama
video.html kemudian masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Video HTML</title>
</head>
<body>
<h2>Contoh memasukkan video pada html</h2><br />
<video controls>
<source src="video/video1.mp4" type="video/mp4">
</video>
</body>
</html>
Hasilnya seperti tampilan di atas. Video di atas menggunakan video yang

ada di sub folder video. Kita juga bisa memasukan file video melalui website
berbeda dengan menyalin/copy link lokasi dari file audio tersebut kemudian
paste pada bagian <source src=”paste disini”> seperti latihan insert gambar di
atas. Tidak semua format video dapat ditampilkan di HTML. Berikut ini
beberapa format video yang didukung:
Format FILE Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Jika video berbeda dengan format di atas, maka harus diubah terlebih
dahulu agar bisa ditambahkan ke HTML. Tag <video> punya beberapa atribut
yang bisa diberikan, antara lain:
Nama Atribut Nilai Fungsi
autoplay true/false Agar video diputar otomatis
controls true/false Untuk mengaktifkan control video player
loop true/false Untuk memutar video terus menerus
muted true/false Untuk menonaktifkan audio
poster Image Path Untuk menentukan gambar cover dari video
width & angka Untuk menentukan tinggi dan lebar video
height
Untuk atribut autoplay, controls, loop dan muted penggunaannya

hampir sama seperti audio di atas. untuk atribut poster, kita akan
menggunakan sebuah gambar sebagai sampul atau tampilan awal dari video
tersebut. Sebagai contoh kita bisa meletakkan sebuah gambar sampul/poster
di folder latmultimedia sub folder pic dengan nama file poster1.jpg. Kemudian
tambahkan kode berikut
<video controls="true" poster="pic/poster1.jpg">
</video>
Sebelum video1.mp4 diputar akan tampil gambar poster1.jpg yang
sudah kita sisipkan menggunakan atribut poster. Untuk menentukan tinggi
dan lebar video, kita bisa memanfaatkan atribut width & height
<video controls="true" poster="pic/poster1.jpg" width="320" height="240">
</video>
Resolusi video akan berubah menjadi 320 * 240 pixel.

HTML5 Multimedia

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML5 Multimedia

Diunggah oleh

Hak Cipta:

Format Tersedia

TAMPILAN FORMAT MULTIMEDIA PADA HTML5

<img src=”nama file” alt=”keterangan”>

Setelah disimpan, buka browser dan lihat hasilnya.

Pada kode <img src="gambar1.png" alt="gambar1"> akan ada

Setelah disimpan, buka browser dan lihat hasilnya.

Hasilnya Gambar akan diambil dari folder bernama pic, yang

Hasilnya Gambar akan diambil dari folder bernama gambar, yang

Apabila browser yang digunakan belum mendukung tag <audio> kita

Hasilnya seperti tampilan di atas. Pada tombol kontrol, kita bisa

Atribut Pada Tag <audio>

Dengan kode di atas, audio akan diputar kembali secara otomatis

Sebelum lanjut ke latihan, buatlah sebuah folder baru di dalam folder

Hasilnya seperti tampilan di atas. Video di atas menggunakan video yang

Untuk atribut autoplay, controls, loop dan muted penggunaannya

Resolusi video akan berubah menjadi 320 * 240 pixel.

Anda mungkin juga menyukai