Rabu, 16 Juli 2014

HTML5 Multimedia

HTML <video> Tag

Pada postingan sebelumnya tentang Apa itu HTML5 ? sudah dijelaskan bahwa yang menarik dari HTML5 yaitu support untuk multimedia. Jadi, menambahkan video ke halaman web yang kita buat itu semudah menambahkan gambar. Tidak ada lagi yang dibutuhkan untuk menangani khusus plug-in atau memerlukan markup gila, Anda dapat melakukannya dengan elemen tunggal, sehingga dapat memperbaiki kinerja video dan membuka pintu untuk menciptakan interaksi antara video dan elemen lain pada halaman yang belum mungkin dilakukan sebelumnya.

Menjalankan video dalam sebuah halaman web mungkin tidak tampak begitu istimewa karena sebelumnya kita sudah dapat melihat video pada halaman web dengan plugin seperti Flash Player, Quicktime, dan Silverlight. Namun, ini sebenarnya adalah sebuah langkah maju yang besar untuk standardisasi pemutaran video di browser web dan perangkat. Tujuannya agar di masa depan, pengembang hanya perlu menggunakan salah satu metode untuk embedding video, didasarkan pada standar terbuka (tidak dikontrol oleh satu perusahaan), dan akan bekerja di mana-mana.  
 

HTML5 Video Tags


Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in media players

HTML5 Video Tags

Unsur <video> memiliki beberapa atribut khusus yang dapat mengubah atau meningkatkan perilaku default.
TagDescription
autoplay 
  • Menceritakan browser untuk segera mulai men-download video dan bermain secepat mungkin. Perhatikan bahwa browser mobile umumnya tidak mendukung atribut ini, pengguna harus sentuh layar untuk memulai pemutaran video.
preload
  • Memberi petunjuk ke browser apakah optimis mengunduh video itu sendiri atau metadata yang dianggap berharga.
Pilihannya adalah:
  • none - Petunjuk ke browser bahwa pengguna mungkin tidak akan menonton video, atau yang meminimalkan lalu lintas yang tidak perlu yang diinginkan.
  •  metadata - Petunjuk ke browser bahwa pengguna tidak diharapkan perlu video, tapi itu mengambil metadata (dimensi, frame pertama, daftar lagu, durasi, dan sebagainya) yang diinginkan.
  • auto - Petunjuk ke browser yang optimis men-download seluruh video dianggap diinginkan.
    
poster
  • Menyediakan  gambar untuk ditampilkan sebelum video di putar/di jalankan
controls
  • Menunjukkan kontrol video default (play, pause, dll)
height & width
  • Mengatur lebar dan tinggi video dalam CSS piksel
loop
  • Penunjuk browser untuk secara otomatis melakukan pengulangan (diulang)
Muted
  • mematikan audio pada video




Berikut contoh script untuk memutar sebuah video lengkap dengan controls-nya :
Code:
<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>




HTML <audio> Tag

 Sama halnya dengan HTML <video> Tag, <audio> Tag juga menambahkan audio ke halaman web yang kita buat itu semudah menambahkan gambar tanpa perlu plug-ins apapun.

Attributes of <audio>

Attribute Value Description
controls *Boolean attribute You need this to make the native audio player appear. Otherwise, you would have to use DOM to control the audio element to play your music.
autoplay *Boolean attribute If this guy exists, the browser will just play your song or your speech without asking permission from your visitor.
loop *Boolean attribute Keep repeating your music
src url The URL of your audio file
preload none | metadata | auto This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls".

none - do not buffer audio file automatically.
metadata - only buffer the metadata of audio file.
auto - buffer audio file before it gets played.

Berikut contoh implementasi script-nya :

Code:
<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
http://www.w3schools.com/html/horse.ogg

</body>
</html>
HAHAHA ini suara kuda :))


Diposting oleh Unknown di 20.55
Label: ,

1 komentar:

Langganan: Posting Komentar (Atom)
 

Deryan E.M. Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates