PWPB | Pertemuan 7
Multimedia dalam HTML (Audio dan Video)
A. Memasukan Audio pada HTML
Untuk memasukan audio pada html diperlukan tag <audio> atau bisa juga menggunakan tag <embed>. Masing masing tag harus diikuti dengan source, jika menggunakan tag <audio> harus menggunakan tag <source> di dalam tag <audio> tersebut. Jika menggunakan tag<embed> harus menggunakan atribut dari tag tersebut yaitu "src". Pada tag <audio> dan <embed> bisa menggunakan attribut "width" dan "height" untuk mengatur tinggi lebarnya audio yang diinginkan. Sebaiknya file audio nya disimpan pada folder khusus agar lebih terstruktur.
Contoh Kodingan Menggunakan tag <audio>
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<center>
<h2>Contoh Format Tampilan Audio</h2>
<audio controls>
<source src="assets/happy.mp3" type="audio/mp3">
</audio>
<p>Jika Audio tidak muncul berarti browser anda tidak support atau ada yang salah dalam penulisan koding</p>
</center>
</body>
</html>
Hasil dari kodingan di atas
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body background="../img/bbgg.jpg">
<center>
<embed height="50" src="assets/happier.mp3">
<font color="purple" face="impact">
<p>
Bila anda tidak dapat mendengar suara, maka kemungkinan browser yang anda gunakan tidak support dengan format file audionya
</p>
<p>
Atau bisa juga speaker anda sedang off :)
</p>
</font>
</center>
</body>
</html>
Hasil dari Kodingan di atas
B. Memasukan Video pada HTML
Untuk memasukan video pada html bisa menggunakan tag <video> yang ditulis pada html sama seperti tag audio, tag <video> juga garus diikuti tag <source> untuk meng impor file yang ada di dalam suatu folder. Pada tag <video> bisa menggunakan attribut "width" dan "height" untuk mengatur tinggi lebarnya video yang diinginkan. Sebaiknya file video nya di simpan pada folder khsusu agar lebih terstruktur.
Contoh Kodingan Menggunakan tag <video>
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<center>
<h2>Contoh Format Video</h2>
<video width="300" height="240" controls>
<source src="assets/earth.mp4" type="video/mp4">
Your browser doesn't support the video tag
</video>
<p>Jika Vidio tidak muncul berarti browser anda tidak support atau ada yang salah dalam penulisan koding</p>
</center>
</body>
</html>
Hasil dari Kodingan di atas
Thumbnail pada format vidio juga bisa di atur sesui keinginan kita dengan menggunakan attribut "poster" yang ada pada tag <video>.
Contoh Kodingan Mengatur Thumbnail di Format Vidio HTML
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<center>
<h2>Format Vidio dengan Thumbnail Yang diatur</h2>
<video width="300" height="240" controls poster="assets/1.jpg">
<source src="assets/earth.mp4" type="video/mp4">
browser anda tidak mendukung format video ini
</video>
</center>
</body>
</html>
Hasil dari Kodingan di atas
SWF merupakan salah satu ekstensi file yang dihasilkan oleh sebuah aplikasi bernama Adobe Flash. Cara menjalankannya di HTML menggunakan tag <embed> lalu import file nya menggunakan attribut "src". Agar bisa dijalankan harus menginstal dulu adobe flash player.
Contoh Kodingan File SWF
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<center><h2>Berikut Merupakan file swf yang bisa di mainkan</h2></center>
<embed src="../img/_one-step-back.swf" type="" width="1500" height="600">
</body>
</html>
Hasil Kodingan di atas
D. Praktikum Hasil Mempelajari tag tag di atas
Kodingan Praktikum
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="shorcut icon" href="../img/Logo.ico">
<style>
.judul {
width: 150px;
border-radius: 30px;
font-size:30px;
font-family: arial;
background: linear-gradient(200deg,cyan,purple);
text-align: center;
margin-left: 90px;
cursor: pointer;
}
.left {
margin-left: 20px;
font-family: arial;
border-radius: 50px;
width: 300px;
height: 30px;
font-size: 25px;
background: linear-gradient(300deg,cyan,purple);
text-align: center;
}
ul li {
list-style: none;
}
p {
color: white;
margin-left: 30px;
}
table {
border: 5px solid#1ED760;
}
audio {
margin-left: 20px;
width: 90%;
}
hr {
width: 92%;
background: #1ED760;
}
.garis {
width: 95%;
height: 5px;
background-color: #1ED760;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table bgcolor="black" align="center" cellspacing="0" width="100%">
<tr>
<td width=200px">
<center><img src="../img/2.jpg" width="250px" height="260px;" style="border-radius: 50%; margin-top: 20px;"></center>
</td>
<td align="left" width="200">
<br>
<div class="judul">Profil</div><br><br><br><br>
<div class="left">Muhammad Fahru Rozi</div><br>
<div class="left">XI RPL 2</div><br>
<div class="left">SMK Negeri 4 Bandung</div><br>
</td>
<td align="left" width="450">
<br>
<div class="judul">Recent</div>
<p><font color="white" face="arial">SkinnyFabs - Happy </font></p>
<audio controls><source src="assets/happy.mp3"></audio>
<p><font color="white" face="arial">Qorygore - The Beast</font></p>
<audio controls><source src="assets/qory.mp3"></audio>
</td>
</tr>
<tr>
<td colspan="3"><br><br><center><div class="garis"></div></center></td>
</tr>
<tr>
<td colspan="3" align="left">
<p><font size="+2" face="arial">Music</font></p>
</td>
</tr>
<tr>
<td colspan="3">
<p><font color="white" face="arial">1. Marshmello - Happier </font></p>
<audio controls><source src="assets/happier.mp3"></audio><br><br>
<center><div class="judul">More</div></center>
</td>
</tr>
<tr>
<td><p><font size="+2" face="arial">Video</font></p></td>
</tr>
<tr>
<td>
<center>
<p><font color="white" face="arial">1. Iron Man </font></p>
<video controls width="75%" poster="assets/im.jpg"><source src="assets/ts.mp4"></video>
</center>
</td>
<td>
<center>
<p><font color="white" face="arial">2. Avengers </font></p>
<video controls width="68%" poster="assets/cap.jpg"><source src="assets/ironman.mp4"></video>
</center>
</td>
<td>
<center>
<p><font color="white" face="arial">3. Earth </font></p>
<video controls width="56%" poster="assets/1.jpg"><source src="assets/earth.mp4"></video>
</center><br><br>
</td>
</tr>
<tr>
<td colspan="3"><center><div class="judul"> More</div></center></td>
</tr>
<tr>
<td colspan="3" align="center"><font size="+2"><p>Copyright Muhammad Fahru Rozi | 2019 © </p></font></td>
</tr>
</table>
</form>
</body>
</html>
Hasil Kodingan Praktikum
Sekian Materi Yang Saya Dapat Berikan Semoga Bermanfaat (:
0 Comments