Menyajikan Komponen Audio, Video Dan Flash

Tampilan Audio

kita dapat menampilkan audio dalam html, untuk menampilkannya kita harus menggunakan tag <audio> dan menambahkan controls didalam tag tersebut agar audionya muncul, dan dibutuhkan tag <source> untuk sumber audionya, karena sumber - sumbernya bersifat offline saya hanya akan menampilkan hasil screenshoot dan codingannya saja seperti berikut

<html>
<head>
 <title>M. Haikal Firdaus XI RPL 1 Audio</title>
</head>
<body>
 <audio controls>
  <source src="Audio/Glasswalls.mp3" type="audio/mpeg">
  Your Browser does not support the audio element
 </audio>
</body>
</html>

Tampilan Video

Untuk tampilan video sama seperti audio, tidak menggunakan tag <audio> melainkan tag <video> dan tetap menggunakan controls dan source oh iya saat dalam source terdapat type yang berarti tipe dari file yang kita masukan.

saya juga menambahkan thumbnail untuk videonya jadi jika videonya belum diplay maka akan ada gambar untuk video tersebut, untuk menambahkannya digunakan poster didalam tag video, bisa dilihat dibawah

<html>
<head>
 <title>M. Haikal Firdaus XI RPL 1 Video</title>
</head>
<body>
 <video controls width="50%" poster="thumb.jpg">
  <source src="Stranger Things - Title Sequence [HD] - Netflix.mp4" type="video/mp4">
 </video>
</body>
</html>

Tampilan Flash

Nah untuk flash lebih berbeda dan lebih sedikit juga, kita tinggal menggunakan tag <embed> dan src untuk lokasi filenya, jadi flash ini seperti animasi namun bukan berbentuk video tapi berformat .swf , biasanya animasi flash ini dibuat di adobe flash

<html>
<head>
 <title>M. Haikal Firdaus XI RPL 1</title>
</head>
<body>
<embed src="Flash/24clock-500x200.swf">
</body>
</html>

nah ini yang terakhir merupakan satu html yang memiliki semua tampilan yang disebutkan tadi

<html>
<head>
 <title>The Walking Dead</title>
</head>
<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script|Sue+Ellen+Francisco" rel="stylesheet">
<body bgcolor="#EBB367">
 <table align="center" width="100%" bgcolor="#37311E" style="border-radius: 20px">
<tr>
   <th colspan="3" align="center" height="100px">
   <font size="+7" face="Sue Ellen Francisco" color="#B2753D">The Walking Dead : The Final Season</font>
   </th>
  </tr>
<tr bgcolor="#FDEAA6">
   <td colspan="3" style="border-bottom: 5px solid #221F1A; border-top: 5px solid #221F1A; border-radius: 20px">
   <marquee><font face="Sue Ellen Francisco" size="+3">The Walking Dead Final Season is available now!</marquee></td>
  </tr>
<tr height="700px">
   <td align="center" width="25%" style="border-right: 5px solid #FDEAA6; border-radius: 15px;">
    <img src="keyart-tall.jpg" width="100%">
   </td>
   <td width="40%" style="padding: 5%">
   <font color="#FDEAA6" face="Nanum Brush Script" size="+2">
    <h1 align="center">
The Walking Dead : The Final Season</h1>
Ini merupakan season ke 4 dan juga season terakhir dari seri The Walking Dead yang dibuat oleh Telltale Games,
    Game ini akan rilis pada tanggal 14 Agustus 2018 untuk PC
   </font>
   </td>
   <td align="center" style="border-left: 5px solid #FDEAA6; border-radius: 15px">
   <font color="#FDEAA6" face="Nanum Brush Script" size="+2">
    <embed src="Flash/loading12.swf"><br>
    Ini Trailernya
    <video controls width="100%" poster="thumbnail.jpg">
     <source src="Video/The Walking Dead - The Final Season - OFFICIAL TRAILER.mp4" type="video/mp4">
    </video><br><br>
    Berikut salah satu soundtrack dari The Walking Dead Season 2<br>
    <audio controls>
     <source src="Audio/TWD.mp3" type="audio/mp3">
    </audio>
   </font>
   </td>
  </tr>
<tr bgcolor="#221F1A" >
   <th colspan="3"style="border-radius: 20px; color: white">Copyright by HaikalFir</th>
  </tr>
</table>
</body>
</html>

Cari Blog Ini

Tardis Archive