Multimedia on the Web

1. Multimedia on the Web

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: • Downloadableaudio • 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 <applet> tag • Web standard requires <object> tag instead, but <object> tag is not supported by all the web browsers.

20. Embedding Java Applets • The <object> tag is standard way to add Java Applet to your web page. Example: <object classid="clsid:CAFEEFAC-0015-0000-0000-ABCDEFFEDCBA"<param name="code" value="Applet1.class"></object> Many browsers do not fully support <object> tag. Instead, many programmers use deprecated <applet> tag. Example: <applet code=“Face.class” width=“300” height=“150”> <param name=“text1” value=“Sample text” /> </applet>

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: <a href =“sound.wmv”>Click here to download movie </a> (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 - <embed> • <embed > tag is not a part of W3C XHTML standard, but is widely supported should by modern browsers. Example: <embed src=“m_clip” autostart=“true” width=“200” height=“150” /> <embed> tag was included in HTML5 specification. The HTML5 <embed> tag is used for embedding an external application or interactive content into an HTML document

24. HTML5 <video> element • HTML5 provides native support to video and audio content. • No plug-ins required for <video> in HTML5 • Problem: Different browsers support different codecs. There is no a standard video file format • Solution: the <source> 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 <video controls width=“500” poster=“images/img.gif”> <source src=”video/mymovie.mp4” type=”video/mp4”> <source src=”video/mymovie.webm” type=”video/webm”> <source src=”video/mymovie.ogv” type=”video/ogg”> </video> The <source> tag is used to specify multiply file format

27. <video> 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 <audio> element in HTML5  Browsers support MP3 – is supported by most of the browser, however, Firefox and Opera don’t support itogg – is supported by Opera and Firefox wav – native IE format <source> tag is used to specify multiple formats

29. Code example <audio controls><source src=”sounds/mymusic.mp3” type=”audio/mp3><source src=”sounds/mymusic.ogg” type=”audio/ogg”></audio> • Note: Provide alternative content to you audio elements.