06 audio-video

Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Audio & VideoAudio & VideoPertemuan ke-6Pertemuan ke-6



AgendaAgenda

SejarahSejarah CodecsCodecs

AudioAudio VideoVideo

<audio><audio> <video><video>



SejarahSejarah Memainkan multimedia pada halaman webMemainkan multimedia pada halaman web

Embed file MIDIEmbed file MIDI<embed src=”music.mid” autostart=”true” loop=”true” <embed src=”music.mid” autostart=”true” loop=”true”

controller=”true”></embed>controller=”true”></embed>

Karena <embed> bukan tag standar maka Karena <embed> bukan tag standar maka digunakan tag <object>digunakan tag <object>

<object><object>

<param name=”src” value=”music.mid”><param name=”src” value=”music.mid”>

<param name=”autoplay” value=”false”><param name=”autoplay” value=”false”>

<param name=”controller” value=”true”><param name=”controller” value=”true”>

<embed src=”music.mid” autostart=”true” loop=”true” <embed src=”music.mid” autostart=”true” loop=”true” controller=”true”></embed>controller=”true”></embed>

</object></object>



SejarahSejarah

Tidak semua browser dapat memainkan Tidak semua browser dapat memainkan tag tersebuttag tersebut

Tidak semua server dapat menangani file Tidak semua server dapat menangani file tersebuttersebut

Diperparah dengan kehadiran videoDiperparah dengan kehadiran video Plugin Player audio dan video di web Plugin Player audio dan video di web

RealPlayer, Windows Media, dan RealPlayer, Windows Media, dan QuickTimeQuickTime

Flash yang paling suksesFlash yang paling sukses



SejarahSejarah

Apple menolak memainkan file flash pada Apple menolak memainkan file flash pada tahun 2007 di gadget iPhone dan iPod tahun 2007 di gadget iPhone dan iPod Touch merekaTouch mereka

Apple memainkan standar video H.264 Apple memainkan standar video H.264 codeccodec

Pembuat HTML5 menginginkan browser Pembuat HTML5 menginginkan browser mendukung file audio dan video secara mendukung file audio dan video secara native tanpa butuh plugin laginative tanpa butuh plugin lagi



CodecsCodecs

Web butuh standar agar semua browser Web butuh standar agar semua browser dapat menampilkan informasi yang dapat menampilkan informasi yang tersediatersedia

Maka format file audio dan video pun Maka format file audio dan video pun membutuhkan standar agar dapat membutuhkan standar agar dapat diputar di berbagai browserdiputar di berbagai browser

Idealnya cukup membuat sebuah file Idealnya cukup membuat sebuah file multimedia dan berjalan di semua multimedia dan berjalan di semua browser dan gadgetbrowser dan gadget



CodecsCodecs

Codec?Codec? Perangkat atau program komputer yang Perangkat atau program komputer yang

dapat memutar (encoding dan/atau dapat memutar (encoding dan/atau decoding) data digital berbentuk streamdecoding) data digital berbentuk stream

Video CodecsVideo Codecs Audio CodecsAudio Codecs



Video CodecsVideo Codecs

Saat ini terdapat 3 format video yang Saat ini terdapat 3 format video yang didukung HTML5, yaitu:didukung HTML5, yaitu:

H.264H.264 TheoraTheora VP8VP8



H.264 (mp4)H.264 (mp4)

Codec video berkualitas tinggi yang Codec video berkualitas tinggi yang distandardisasikan pada tahun 2003 oleh grup distandardisasikan pada tahun 2003 oleh grup MPEGMPEG

Standar bagi Microsoft dan AppleStandar bagi Microsoft dan Apple Dapat diputar di iPhone, iPod Touch, iPadDapat diputar di iPhone, iPod Touch, iPad

Youtube merubah format videonya ke H.264 agar Youtube merubah format videonya ke H.264 agar dapat diputar oleh perangkat-perangkat dapat diputar oleh perangkat-perangkat tersebuttersebut

Memiliki patent/tidak terbukaMemiliki patent/tidak terbuka Dibenci oleh komunitas free softwareDibenci oleh komunitas free software



Theora (Ogg)Theora (Ogg)

Format bebas royalti yang dikembangkan Format bebas royalti yang dikembangkan oleh yayasan xiph.orgoleh yayasan xiph.org

Kelemahannya lambat diadopsi oleh Kelemahannya lambat diadopsi oleh perangkat mobileperangkat mobile

Tidak didukung oleh Internet Explorer dan Tidak didukung oleh Internet Explorer dan perangkat iOS (iPhone, iPod, iPad)perangkat iOS (iPhone, iPod, iPad)

Didukung oleh Firefox, Chrome, dan OperaDidukung oleh Firefox, Chrome, dan Opera



VP8 (WebM)VP8 (WebM)

Buatan google, bebas royaltiBuatan google, bebas royalti Kualitas setara H.264Kualitas setara H.264 Didukung Chrome, Opera, Firefox, IE9Didukung Chrome, Opera, Firefox, IE9 Adobe Flash VP8→Adobe Flash VP8→



Audio CodecsAudio Codecs

AACAAC Safari4, Chrome3, iOSSafari4, Chrome3, iOS

MP3MP3 IE9, Safari4, Chrome3, iOSIE9, Safari4, Chrome3, iOS

Vorbis (OGG)Vorbis (OGG) Firefox3, Chrome4, Opera10Firefox3, Chrome4, Opera10



AACAAC

Advanced Audio CodingAdvanced Audio Coding Format standar dari Apple dana toko Format standar dari Apple dana toko

iTunes nyaiTunes nya Didesain memiliki kualitas yang lebih baik Didesain memiliki kualitas yang lebih baik

mp3mp3 Codec lisensinya tidak bebasCodec lisensinya tidak bebas



Vorbis (OGG)Vorbis (OGG)

Bebas royaltiBebas royalti Memiliki kualitas suara yng sangat baik Memiliki kualitas suara yng sangat baik

namun sayang tidak didukung oleh namun sayang tidak didukung oleh banyak browserbanyak browser



MP3MP3

Populer dan umumPopuler dan umum Tidak didukung Firefox dan OperaTidak didukung Firefox dan Opera



Container Audio dan VideoContainer Audio dan Video

AudioAudio

<audio src=”nama_file.ogg”></audio><audio src=”nama_file.ogg”></audio> VideoVideo

<video src=”nama_file.ogg”></video><video src=”nama_file.ogg”></video>



Container AudioContainer 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>

view-source:http://media.pragprog.com/titles/bhh5/code/html5_audio/sounds/ogg/drums.ogg

view-source:http://media.pragprog.com/titles/bhh5/code/html5_audio/sounds/mp3/drums.mp3

view-source:http://media.pragprog.com/titles/bhh5/code/html5_audio/sounds/mp3/drums.mp3



Container VideoContainer 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>



??

06 audio-video

Education

Transcript of 06 audio-video