CHAPTER 10 AUDIO AND VIDEO

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

CONVERTING AUDIO FORMATS Convert youtube videos to MP3 audio files: (for Windows) sbooth.org/Max/ (for Macs) Audacity – installed on all machines on 3 rd 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 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

CONVERTING VIDEO FORMATS Convert youtube videos to MP4 audio files: free tool to convert between formats