Audio and Video Chapter 10

Media player api HTML5 contains an API (Application Programming Interface) for controlling audio and video players embedded on a web page. Uses the browsers’ audio/video players Browsers can’t agree on same format, so have to provide several for cross-platform compatibility Media stored using a codec (code/decode or compress/decompress)

Audio formats MP3 (.mp3) – IE, Chrome, Safari, Android WAV (.wav) – Chrome, Firefox, Safari, Opera, Android Ogg Vorbis (.ogg) – Chrome, Firefox, Opera, Android MPEG-4/AAC (.mp4) – IE, Chrome, Safari, Android WebM (.webm) – IE, Chrome, Firefox, Opera, Android Can cover all platforms if .mp3 and .webm formats are provided

Adding audio to the page <audio> </audio> tag Attributes: src – audio file to play controls – display browser’s audio controls autoplay – start playing when page is loaded loop – keep playing forever muted – start with audio muted preload=“auto” – start loading the audio as soon as page loads

Specifying multiple sources <audio controls autoplay> <source src=“Toreadors.mp3” type=”audio/mp3”> <source src=“Toreadors.wav” type=”audio/wav”> </audio>

Converting audio formats Convert youtube videos to MP3 audio files: https://www.onlinevideoconverter.com/mp3-converter Audacity – installed on all machines on 3rd floor RB

Video formats Ogg Theora (.ogg) –Chrome, Firefox, Opera MP4/H.264 (.mp4) – IE, Safari, Android WebM (.webm) – IE, Chrome, Firefox, Opera, Android Can cover all platforms if .mp4 and .webm formats are provided

Adding Video to the page <video> </video> tag Attributes: src – video file to play width – size in pixels height – size in pixels poster – still image to use in place of video controls – display browser’s videocontrols autoplay – start playing when page is loaded loop – keep playing forever muted – start with audio muted preload=“auto” – start loading the video as soon as page loads

Specifying multiple sources <video preload=“none” controls poster=“Animals.jpg”> <source src=“Animals.mp4” type=”audio/mp4”> <source src=“Animals.webm” type=”audio/webm”> </video>

Converting video formats Convert youtube videos to MP4 audio files: http://www.clipconverter.cc www.mirovideoconverter.com - free tool to convert between formats