1 / 29

Multimedia on the Web

Multimedia on the Web. Multimedia. Purpose of Multimedia Multimedia Issues Animation Digital Audio fundamentals Browser Plug-ins Java Applets. Multimedia on the Web. Multimedia is a mix of different dynamic content such as Animation (2D and 3D) Video Audio Java Applets.

mieko
Download Presentation

Multimedia on the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related