pada kesempatan kali ini saya akan membahas HTML 5.
1. HTML 5 untuk menyisipkan Format tampilan audio
html 5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web dengan elemen <audio> ..... </audio> format suara yang telah didukung hingga saat ini adalah mp3, ogg, wap. tidak semua tipe file audio tersebut didukung oleh browser
-ogg
merupakan format audio yang didukung oleh mozilla, opera, chrome
-mp3
didukung oleh crome dan safari
-wav
didukng oleh mozilla dan opera
MIME untuk format audio
digunakan untuk mekanisme mengirim berbagai informasi seperti teks, aplikasi, audio dan sebagainya agar browser tidak salah menerjemahkan konten yang diterima. berikut tipe MIME untuk format audio:
MP3 --------- audio/mp3
ogg --------- audio/ogg
wav --------- audio/wav
untuk latihan mari kita buat scriptnya
pertama siapkan notepad++ untuk membuat code (silahkan download di google banyak)
kedua siapkan browser terupdate / terbaru ( karena kalo browser lama tidak support HTML 5 (
1. silahkan buka Notepad++ nya
2. silahkan copy script berikut ini
<!DOCTYPE HTML>
<html>
<head><title> Latihan Audio </head></title>
<body>
<audio controls>
<source src="lagu.ogg" type="audio/ogg">
<source src="lagu.mp3" type="audio/mp3">
</audio>
</body>
</html>
berikut keterakan dari script diatas:
- yang berwarna Hijau itu script yang menandakan HTML 5
- yang berwarna kuning itu judul yang nantinya akan tampil di status bar browser, disitu kita bisa isikan bebas sesuai keinginan
- yang berwarna merah itu judul lagu. jadi lagu yang mau disisipkan harus berada di dalam satu folder. ingat judul lagu harus sama pada script dan pada dilagunya.
- yang berwarna biru luget itu exstensinya
- yang berwarna biru terang itu MIME TYPE nya yang tadi sudah dibahas diatas
3. jika sudah kita simpan code dengan cara CTRL+S atau FIle > Save. simpan dengan exstensi html (ex: latihan.html) ingat ya simpan dalam satu folder dengan lagunya
4. sekarang kita buka file html kita.
nb: ada banyak atribut atribut untuk file jenis audio
2. HTML 5 untuk menyisipkan Format tampilan video
selain format tampilan audio di html 5 juga bisa menampilkan format tampilan video.
Format tampilan file Video merupakan tag yang digunakan untuk menampilakn file video adalah <video> .... </video> samahalnya pada audio, video juga tidak semua format vidoe dapat ditampilkan pada web. sementara ini hanya dapat format video yang bisa diproses diantaranya: Webm, ogg, MP4
berikut atribut Video:
height : <video height="240"> untuk mengatur tinggi video
width : <video width="320"> untuk mengatur lebar video
loop : <video loop="loop"> untuk mengatur video secara berulang
poster : <video poster="anak.gif"> untuk memunculkan gampar/poster pada saat bufer atau diunduh.
sebenarnya masih banyak atribut atribut untuk file video.
untuk latian kita bisa lihat scipt dibawah ini :
<!DOCTYPE HTML>
<html>
<head><title> Latihan Audio </title></head>
<body>
<video controls=controls height="240" width="320" poster=gambar.jpg>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</audio>
</body>
</html>
dan jika berhasil maka akan keluar video.. berikut ini schreenshoot menggunakan google chrome
selesai.
sekian yang saya bisa share
selamat mencoba
Tidak ada komentar:
Posting Komentar