Cara Seting Audio di HTML5

HTML5 memperkenalkan tag baru bernama <audio>. Tag ini digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web. Ketika di generasi sebelumnya (HTML 4.01) memasukkanaudio ke dalam web masih harus menggunakan flash. Tag audio pada HTML5, setidaknya ada 3 jenis format audio yang mendukung yaitu: Ogg, MP3, Wav.

Sintak Penulisan:

<audio controls="controls">

<source src="judullagu.mp3" type="audio/mp3">

</audio>

Atribut pada tag <audio>

  

Contoh penggunaan tag <audio>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Audio</title>

</head>

<body>

<h3>One Direction - One Thing</h3>

<audio controls="controls">

<source src="We Found Love.mp3" type="audio/mp3"/>

</audio> <br/>

<h3>Bruno Mars - Locked Out Of Heaven</h3>

<audio controls="controls">

<source src="Rihanna.ogg" type="audio/ogg"/>

</audio>

</body>

</html>

 

Referensi :
http://id.wikipedia.org/wiki/HTML5
http://www.w3schools.com

Cara setting video di HTML5

HTML5 memperkenalkan tag baru bernama <video>. Tag ini digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web. Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahan yang biasa disebut flash Player. Tag video pada HTML5, setidaknya ada 3 jenis format video yang mendukung yaitu:

·      Ogg (File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

·      MPEG4 (File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

·      WebM (File WebM dengan Video Codec VP8 dan Audio Codec Vorbis) (.webm)

Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

Sintak Penulisan:

<video controls="controls">

<source src="judulvideo.ogg" type="video/ogg">

<source src="judulvideo.mp4" type="video/mp4">

<source src="judulvideo.webm" type="video/webm">

</video> 

Atribut pada tag <video>

 
Contoh tag video Battle Of Surabaya
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<h2>Battle Of Surabaya Official Trailer (Version Indonesia)</h2>
<video controls="controls" width="450" height="260">
<source src="battleofsurabaya.webm" type="video/webm"/>
</video>
</body>
</html>

Contoh tag video Dhimas Tedjo Religi (Renungan Wengi)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<h2>Renungan Wengi</h2>
<video controls="controls" width="450" height="260">
<source src="dhimastedjo-renunganwengi.webm" type="video/webm"/>
</video>
</body>
</html> 

Contoh tag video Wafiq Azizah (Sholatuminallah)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<h2>SHOLATUMINALLAH Wafiq Azizah</h2>
<video controls="controls" width="450" height="260">
<source src="Wafiq Azizah-Sholatuminallah.webm" type="video/webm"/>
</video>
</body>
</html>

 

Referensi :
http://id.wikipedia.org/wiki/HTML5
http://www.w3schools.com

Figure dan Figcaption

HTML5 memperkenalkan tag baru bernama <figure>. Tag ini digunakan sebagai wadah untuk menampung atau meletakkan tag <img> agar dapat tersusun secara rapih. Sedangkan <figcaption> digunakan untuk menuliskan atau memberikan keterangan pada gambar.

<figure>
  <img src="url">
  <figcaption>Keterangan Gambar<figcaption>
</figure>
Contoh penggunaan tag <figure> dan <figcaption>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Figure dan Figcaption</title>
</head>
<body>
<figure>
  <img src="wafiqazizah.jpg" width="192" height="320">
  <figcaption>Wafiq Azizah </figcaption>
  <img src="maudyayunda.jpg" width="192" height="320">
  <figcaption>Maudy Ayunda Berkerudung</figcaption>
</figure>
</body>
</html>

Wafiq Azizah

Maudy Ayunda Berkerudung

Referensi :
http://id.wikipedia.org/wiki/HTML5
http://www.w3schools.com