06 audio-video
Upcoming SlideShare
Loading in...5
×
 

06 audio-video

on

  • 1,750 views

 

Statistics

Views

Total Views
1,750
Views on SlideShare
1,750
Embed Views
0

Actions

Likes
0
Downloads
148
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

06 audio-video 06 audio-video Presentation Transcript

  • Audio & Video Pertemuan ke-6 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • Agenda  Sejarah  Codecs  Audio  Video  <audio>  <video> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • MP3  Populer dan umum  Tidak didukung Firefox dan Opera Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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
  • 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
  • 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
  • ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi