1. Audio and Video
Chapter 10

2. 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)

3. 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

4. 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

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

6. Converting audio formats
Convert youtube videos to MP3 audio files:
Audacity – installed on all machines on 3rd floor RB

7. 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

8. 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

9. 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>

10. Converting video formats
Convert youtube videos to MP4 audio files:
- free tool to convert between formats