1. M ULTIMEDIA ON THE W EB

2. Multimedia Purpose of Multimedia Multimedia Issues Animation Digital Audio fundamentals Browser Plug-ins Java Applets

3. Multimedia on the Web Multimedia is a mix of different dynamic content such as – Animation (2D and 3D) – Video – Audio – Java Applets

4. Multimedia on the Web Reach Media Applications (Rich Media Adds) – uses audio, video, Flash, Silverlight, and other dynamic content that catch user’s attention and persuade a user to click through to the advertiser’s site. Multimedia requires plug-ins – a dynamic application associated with a specific platform and browser and has a purpose to extend browser capability Usually free HTML5 provides native support for multimedia (video and audio) without plug-ins.

5. Multimedia issues Time factor – download time Browser plug-ins compatibilities Multimedia to avoid: scrolling text, animation in loop Accessibility issues

6. Animation Animated GIFs – compilation of still images set into sequence Rollovers – actions triggered by passing the mouser pointer over the links or buttons. Created using JavaScript or CSS Adobe Flash files De facto standard for 2D animation Used to create Reach Media Ads Vector based files (smaller in size) Flash payer is widely supported Microsoft Silverlight – a browser plug-in Enables Rich Internet Applications – Animation, Interactivity, vector graphics, video and audio content, Deep Zoom Competitor to Adobe Flash

7. Audio on the web To add a sound file it is necessary to convert analog sounds to digital format Digitizing a sound: Computer records measurements of the sound at discrete moment in time Each measurement is called a SAMPLE The Number of samples taken per second is called the SAMPLING RATE Sampling rate is measured in Kilohertz (KHz) Most commonly used sampling rates: 11KHz, 22KHz, 44KHz. The higher is the rate the higher is the quality of the sound, and the larger is a file size.

8. Sampling rate illustrated

9. Sample Resolution Sample resolution Indicates the precision and quality in measurements of the sound within each sample. There are two sample resolution values commonly used in digital sounds: 8-bit and 16-bit. Higher resolution creates a sound file that is presents greater details, but produces the larger files.

10. Sample resolution illustrated

11. Audio and Video File Formats – Download vs. Streaming Audio can be delivered in two different ways: – Downloadable audio Means that the playback begins when the entire audio file is fully download A playback starts when the entire file is downloaded from a web server to a user computer – Streaming audio file delivery A user doesn’t wait to wait for the download to finish As soon as the connection is made to the streaming audio server, a small buffer is created and the audio file begins to play while the rest of the file downloads from the server

12. Streaming file formats and Plug-ins - RealPlayer RealPlayer – is a plug-in that uses streaming technology (audio and video) Ideal tool for broadcasting up-to-the minute news and sporting events File Formats:.ra – Real Audio – streaming audio format.ram – Real movie – streaming file format

13. Streaming file formats and Plug-ins - QuickTime QuickTime – multimedia plug-in and application to create and handle various formats of sound, animation, video and interactivity Developed by Apple (for Mac and Windows) File formats: –.MOV – for audio /video – QT - quick time streaming format – QTVR – QT virtual reality

14. Streaming file formats and Plug-ins – Windows Media Player Windows Media Player – proprietary plug-in developed by Microsoft for playing audio and video on PCs. Popular File formats:.WMV – Windows Media Video.WMA – Windows Media Audio

15. Popular file formats – Audio MIDI (.mid) - Musical Instrument Digital Interface – Limited to music files. Digitally synthesizes sounds by recording each notes pitch, length, and volume – Not intended for human speech recording. – Not visible in the browser and usually run in the background MP3 - Moving Picture Experts Group Layer 3 – the most popular format for storing and delivering audio on the web. – Reduces file size up to 12 times, yet retaining almost the same fidelity – The most popular for file swapping business – Requires MP3 player WAV - Microsoft native audio file format.ra – RealNetwork RealPlayaer streaming audio file format.au – native UNIX format.aiff – native MAC audio format

16. Video file format.MOV – Apple QuickTime file.RAM – Real Network streaming file format (Requires Real Player).AVI – Audio Video Interleave - standard Video file format for windows Great quality Very large files MPEG – Moving Picture Experts Group - (.mpeg1,.mpeg2,.mpeg4) – The most popular video file format – high compression, better quality.

17. Adobe Flash Player.swf files – display and play back a wide range of multimedia content. Supports vector graphics and animation Supports sounds Used to create interactive content, reach Media Ads, Games Installed in the most users’ computers Uses Action Script – Object oriented Programming language – to create and manipulate animated objects

18. Microsoft Silverlight Browser plugin that enables Rich Internet Applications (RIA) features: – Video – Audio – Animation – Deep Zoom Microsoft Competitor to Adobe Flash Compiled file -.xap files (pronounced zap) Uses JavaScript and.XAML (pronounced zamal) Usually developed using MS Visual Studio (with C# or Visual Basic)

19. Java Applets Java Applets – are small applications written in Java Programming language Work within users’ browser window Embedded in HTML file as an object Provide animation and interactivity Cross platform / cross browser technology Complied file extension -.class Usually embedded with the tag Web standard requires tag instead, but tag is not supported by all the web browsers.

20. Embedding Java Applets The tag is standard way to add Java Applet to your web page. Example: Many browsers do not fully support tag. Instead, many programmers use deprecated tag. Example:

21. Podcasting Podcast – digital recording of a radio broadcast or similar content that is available on the Internet for downloading and subscription or available for downloading to a personal audio player Podcasts allow to subscribe to a “feed” to automatically receive new episodes of the show or audio files. Requires special software – podcast reader Feeds are created using XML language – RSS feeds – Really Simple Syndication A web site that keeps RSS feeds – are called Aggregators

22. Creating a link to a multimedia file To create a downloadable multimedia file, you must create a hyperlink to this file: Click here to download movie (WMV, 3.MB) If a user has already installed the plug-in, a web browser will launch Windows Media Player. After file is fully downloaded, the movie appears in WMP window

23. Embedding multimedia file - tag is not a part of W3C XHTML standard, but is widely supported should by modern browsers. Example: tag was included in HTML5 specification. The HTML5 tag is used for embedding an external application or interactive content into an HTML document

24. HTML5 element HTML5 provides native support to video and audio content. No plug-ins required for in HTML5 Problem: Different browsers support different codecs. There is no a standard video file format Solution: the tag allows to specify different file formats.

25. File formats used in HTML5 MP4 – supported by IE 9 and later and by Safari browser. Webm – is supported by Google Chrome, by Firefox, and by current version of Opera OGG – is supported by Firefox, Chrome, and Opera

26. Code example The tag is used to specify multiply file format

27. attributes controls - this attribute displays video controls. width – controls the size of the video. poster – defines the still image that is displayed in a place of the first frame of the movie or black area that will be shown while the movie is loaded.

28. Using element in HTML5 Browsers support MP3 – is supported by most of the browser, however, Firefox and Opera don’t support it ogg – is supported by Opera and Firefox wav – native IE format tag is used to specify multiple formats

29. Code example Note: Provide alternative content to you audio elements.