Format Multimedia Dalam HTML (Pertemuan 7)

Assalamu'alaikum Wr.Wb

Hello Guys, bertemu lagi dengan saya Salman Fauzan dipostingan terbaru ini. Kali ini kita masih akan membahas seputar html. Sekarang kita akan membahas bagaimana cara menambahkan file format Video Audio maupun SWF (Shock Wave Flash). Langsung saja kita mulai pembahasanya.

1.Menampilkan Audio
Kita dapat menambahkan Audio yang kita inginkan menggunakan tag <audio controls> <source src = "Folder/File Yang Ingin Ditampilkan" untuk lebih jelasnya, kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Menampilkan Audio </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
  <audio controls>
    <source src = " Media/Nano - Hysteria.mp3" type = " audio/mpeg " >
    Your browser does not support the audio element.
   </center>
</audio>
 
 </body>
</html>

Format pertama yang akan ditampilkan adalah Audio Player, yang hasilnya akan seperti gambar dibawah ini :

Selain menambahkan Audio Player, kalian juga dapat menambahkan Audio Player yang Auto Play atau Memulainya secara Otomatis ketika website kalian dibuka. Untuk codingan Audio Auto Play adalah seperti ini :

<html>
<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Auto Play Audio </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
    <embed height ="50" width = "100" src = "Media/Nano - Hysteria.mp3 ">
   <font face = "Comic Sans MS" color = "Darkorange" >
    <p>
Bila anda tidak dapat mendengarkan suara, maka kemungkinan
    browser yang anda gunakan tidak support dengan format file audio yang
    ingin ditampilkan </p>
<p>
Atau bisa juga speakere anda dalam keadaan off </p>
</center>
</font>
  </body>
</html>

Oh ya Guys, saya menggunakan browser Chrome untuk menampilkan format Audio ini, apabila Audio yang ditampilkan tidak terdengar maka kemungkinan Browser yang kalian pakai tidak support untuk menggunakan format ini. Untuk hasil dari codingan diatas akan menjadi seperti ini :

2. Menampilkan Video
Kita juga dapat menampilkan Video dalam halaman website kita, untuk menampilkan Video kita menggunakan tag <video controls> kalian juga dapat menambahkan Height / Width sesudah tag Video untuk mengatur resolusi Video Playernya. Untuk codinganya akan menjadi seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Tampilan Video </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
   <video width = "520" height = "340" controls >
    <source src = "Media/Nano - Hysteria.mp4" type = "video/mp4">
    </center>
</video>
  </body>
</html>
<textarea>
<br />

Untuk hasil Video player yang pertama akan menjadi seperti ini :

Kita juga dapat menampilkan sebuah Video yang menggunakan Thumbnail / Poster untuk tampilan awal Videonya. untuk codingan menampilan Video menggunakan Thumbnail adalah sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Cek Video </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
   <video width = "520" height = "340" controls poster = "Media/Hysteria.jpg">
    <source src = "Media/Nano - Hysteria.mp4" type "video/mp4">
    Browser anda tidak mendukung format video ini.
    </center>
</video>
  </body>
</html>

Untuk hasil dari codingan diatas yang menggunakan Thumbnail pada Video player akan terlihat seperti ini :

3. Menampilkan Format Flash / SWF
Kita juga dapat menampilkan File berupa SWF pada website kita. Format SWF adalah sebuah format yang dapat menampilkan game / buku yang menggunakan plugin flashplayer. Untuk codingannya adalah sebagai berikut :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia XI - RPL 3 Cek Video </title>
 </head>
  <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
   <embed width = "50%" height = "80%" src = "Media/StickmanWAR.swf" >
    </center>
</body>
</html>

Hasilnya akan terlihat seperti ini :

4.Format Gabungan
Nah kali ini saya akan mencontohkan tampilan Web, yang menampilkan file Video dan Audio serta menggunakan table dari pembahasan kita sebelumnya. Codingannya adalah sebagai berikut :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Format Audio Video </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
    <font face = "Comic Sans MS">
     <h1>
 Profile LiSA Japanese Musician </h1>
</font>
     </center>
<center>
  <table width="50%" bgcolor="Brown">
<tr>
   <th colspan="2"><font face="Comic Sans MS" color="white" size="4">Selamat datang di Halaman Website Saya</font>
   </th>
    </tr>
<tr>
    <td width="160" rowspan="3" valign="top" bgcolor="#993366">
     <img src="Media/LiSA.jpg" alt="foto" width="400px">
    </td >
    <td bgcolor="#993366" valign="top">
   <p>
<font face="Monotype Corsiva" color="white" size="4">
   Real Name  : Risa Oribe <br>
   Nickname   : LiSA (Love is Same All) <br>
   Born Date  : June, 24 1987 <br>
   Occupation : Singer <br>
   Genres     : J-Pop, Rock <br>
   Her Song   : 
   <br> <audio controls>
   <source src="Media/LiSA - Catch The Moment.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
   </audio> <br>
   Her Video  : <br>
    <video width="300" controls>
     <source src="Media/LiSA - crossing fields.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
   </font></p>
</td>
    </tr>
</table>
</center>
</body>
</html>

Hasil dari Codingan diatas akan terlihat menjadi seperti ini :

Sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalahan pada penyampaian maupun pengetikan. See you Next!

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Format Multimedia Dalam HTML (Pertemuan 7)

Komentar

Posting Komentar