Audio & Video                                 Pertemuan ke-6  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun o...
Agenda           Sejarah           Codecs                                    Audio                                    ...
Sejarah           Memainkan multimedia pada halaman web           Embed file MIDI        <embed src=”music.mid” autostar...
Sejarah           Tidak semua browser dapat memainkan          tag tersebut           Tidak semua server dapat menangani...
Sejarah           Apple menolak memainkan file flash pada         tahun 2007 di gadget iPhone dan iPod         Touch mere...
Codecs           Web butuh standar agar semua browser         dapat menampilkan informasi yang         tersedia         ...
Codecs           Codec?                                    Perangkat atau program komputer yang                     dapa...
Video Codecs           Saat ini terdapat 3 format video yang         didukung HTML5, yaitu:                             ...
H.264 (mp4)           Codec video berkualitas tinggi yang         distandardisasikan pada tahun 2003 oleh grup         MP...
Theora (Ogg)           Format bebas royalti yang dikembangkan         oleh yayasan xiph.org           Kelemahannya lamba...
VP8 (WebM)           Buatan google, bebas royalti           Kualitas setara H.264           Didukung Chrome, Opera, Fir...
Audio Codecs           AAC                                    Safari4, Chrome3, iOS           MP3                     ...
AAC           Advanced Audio Coding           Format standar dari Apple dana toko         iTunes nya           Didesain...
Vorbis (OGG)           Bebas royalti           Memiliki kualitas suara yng sangat baik         namun sayang tidak diduku...
MP3           Populer dan umum           Tidak didukung Firefox dan Opera  Materi kuliah Desain Web,   Teknik Informatik...
Container Audio dan Video           Audio        <audio src=”nama_file.ogg”></audio>           Video        <video src=”...
Container Audio    <h1>Samples:</h1>    <article class="sample">        <header><h2>Drums</h2></header>        <audio id="...
Container Video    <video controls>       <source src="video/h264/01_blur.mp4">       <source src="video/theora/01_blur.og...
?  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Upcoming SlideShare
Loading in …5
×

06 audio-video

1,798 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,798
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
158
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

06 audio-video

  1. 1. Audio & Video Pertemuan ke-6 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. Agenda  Sejarah  Codecs  Audio  Video  <audio>  <video> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 3. Sejarah  Memainkan multimedia pada halaman web  Embed file MIDI <embed src=”music.mid” autostart=”true” loop=”true”  controller=”true”></embed>  Karena <embed> bukan tag standar maka digunakan tag <object> <object> <param name=”src” value=”music.mid”> <param name=”autoplay” value=”false”> <param name=”controller” value=”true”> <embed src=”music.mid” autostart=”true” loop=”true”  controller=”true”></embed> </object> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  4. 4. Sejarah  Tidak semua browser dapat memainkan tag tersebut  Tidak semua server dapat menangani file tersebut  Diperparah dengan kehadiran video  Plugin Player audio dan video di web RealPlayer, Windows Media, dan QuickTime  Flash yang paling sukses Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Sejarah  Apple menolak memainkan file flash pada tahun 2007 di gadget iPhone dan iPod Touch mereka  Apple memainkan standar video H.264 codec  Pembuat HTML5 menginginkan browser mendukung file audio dan video secara native tanpa butuh plugin lagi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  6. 6. Codecs  Web butuh standar agar semua browser dapat menampilkan informasi yang tersedia  Maka format file audio dan video pun membutuhkan standar agar dapat diputar di berbagai browser  Idealnya cukup membuat sebuah file multimedia dan berjalan di semua browser dan gadget Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  7. 7. Codecs  Codec?  Perangkat atau program komputer yang dapat memutar (encoding dan/atau decoding) data digital berbentuk stream  Video Codecs  Audio Codecs Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  8. 8. Video Codecs  Saat ini terdapat 3 format video yang didukung HTML5, yaitu:  H.264  Theora  VP8 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 9. H.264 (mp4)  Codec video berkualitas tinggi yang distandardisasikan pada tahun 2003 oleh grup MPEG  Standar bagi Microsoft dan Apple  Dapat diputar di iPhone, iPod Touch, iPad  Youtube merubah format videonya ke H.264 agar dapat diputar oleh perangkat-perangkat tersebut  Memiliki patent/tidak terbuka  Dibenci oleh komunitas free software Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  10. 10. Theora (Ogg)  Format bebas royalti yang dikembangkan oleh yayasan xiph.org  Kelemahannya lambat diadopsi oleh perangkat mobile  Tidak didukung oleh Internet Explorer dan perangkat iOS (iPhone, iPod, iPad)  Didukung oleh Firefox, Chrome, dan Opera Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  11. 11. VP8 (WebM)  Buatan google, bebas royalti  Kualitas setara H.264  Didukung Chrome, Opera, Firefox, IE9  Adobe Flash → VP8 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  12. 12. Audio Codecs  AAC  Safari4, Chrome3, iOS  MP3  IE9, Safari4, Chrome3, iOS  Vorbis (OGG)  Firefox3, Chrome4, Opera10 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  13. 13. AAC  Advanced Audio Coding  Format standar dari Apple dana toko iTunes nya  Didesain memiliki kualitas yang lebih baik mp3  Codec lisensinya tidak bebas Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  14. 14. Vorbis (OGG)  Bebas royalti  Memiliki kualitas suara yng sangat baik namun sayang tidak didukung oleh banyak browser Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  15. 15. MP3  Populer dan umum  Tidak didukung Firefox dan Opera Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  16. 16. Container Audio dan Video  Audio <audio src=”nama_file.ogg”></audio>  Video <video src=”nama_file.ogg”></video> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  17. 17. Container Audio <h1>Samples:</h1> <article class="sample"> <header><h2>Drums</h2></header>     <audio id="drums" controls>     <source src="sounds/ogg/drums.ogg" type="audio/ogg"> <source src="sounds/mp3/drums.mp3" type="audio/mpeg"> <a href="sounds/mp3/drums.mp3">Download drums.mp3</a>   </audio> </article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  18. 18. Container Video <video controls> <source src="video/h264/01_blur.mp4">    <source src="video/theora/01_blur.ogv">    <source src="video/webm/01_blur.webm">    <p>Your browser does not support the video tag.</p> </video> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  19. 19. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×