1 / 0

Multimedia on the Web: Issues of Bandwidth

Multimedia on the Web: Issues of Bandwidth. Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second. Consider bandwidth when working with multimedia on a Web site.

tress
Télécharger la présentation

Multimedia on the Web: Issues of Bandwidth

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: Issues of Bandwidth Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second. Consider bandwidth when working with multimedia on a Web site. The higher quality the media, the larger the file size and the longer the load time.
  2. Adding Multimedia to a Web Page Modern multimedia can be added to a Web page two different ways: <audio> and <video> tags (HTML 5) <embed> and<object> tags (HTML 4.01) The old-fashioned way is no longer popular.
  3. Audio Media: Basic Definitions Every sound wave is composed of two components: Amplitude- the height of the wave. Amplitude relates to the sound’s volume Frequency- the speed at which the sound wave moves. Frequency relates to sound pitch
  4. Digitizing Audio Sound waves are analog functions (represent a continuously varying signal) To store the information digitally, however, it must be converted to discrete pieces of information. The quality of the conversion is measured in two ways: sampling rate and sampling resolution.
  5. The Sampling Rate Digital recording measures the sound’s amplitude at discrete moments in time Each measurement or slice is called a sample Samples per second taken is called the sampling rate, measured in Khz. Low sampling rate Medium sampling rate High sampling rate
  6. Sampling Resolution Sampling resolution indicates the precision in measuring the sound within each sample. Resolutions include: 8-bit 16-bit 32-bit
  7. Sample Rates and Resolution Sampling rate and sample resolution as related to sound quality: Sampling Rate and Sample ResolutionSound Quality 8 KHz, 8-bit, mono Telephone 22 KHz, 16-bit, stereo FM Radio 44 KHz, 16-bit, stereo CD 192 KHz, 24-bit, 5.1 channel Blu-Ray High Def DVD
  8. Some Popular Audio Media Formats There are different sound file formats used by different operating systems: AIFF – developed for Apple Macintosh OS WAV – developed for Microsoft Windows OS RealAudio – developed for realtime Web apps AU – developed for UNIX OS MP3 – primary format for music sharing MIDI – limited to instrumental music OGG – royalty-free but not very popular
  9. Streaming vsNonstreaming Media Nonstreaming media are completely downloaded by users before being played. It may produce lengthy delays Streaming media are processed in a steady and continuous stream as they are downloaded by the browser
  10. The HTML5 <audio> Tag To add an audio clip under HTML5, use the audiotag: <audio> <source src=”url1” /> <source src=”url2” /> … </audio> where url1, url2, etc. are the possible sources of the audio. Example: <audio> <source src=”song.mp3” /> <source src=”song.ogg” /> </audio>
  11. <audio> Attributes
  12. Example: Using the controls Attribute <audio controls=“controls”> <source src=”song.mp3” /> <source src=”song.ogg” /> </audio>
  13. Audio in HTML 4.01 Using <embed> Older browsers that don’t support the HTML5 </audio>tag instead rely on plug-ins to play embedded media clips using the <embed> tag. <audio controls=“controls”> <source src=”song.mp3” /> <source src=”song.ogg” /> <embed src=”overture.mp3” type=”audio/mpeg” width=”250” height=”10” /> </audio>
  14. Video Media: Basic Definitions Video files are composed of a series of single images called frames.The number of frames shown in a period of time is the frame rate. Reducing the frame rate and frame size reduces the size of your file.
  15. Codecs and Video File Formats Codecsare programs that compress and decompress the video to control the file size.
  16. The HTML5 <video> Tag To add a video clip under HTML5, use the video tag: <video> <source src=”url1” /> <source src=”url2” /> … </video> where url1, url2, etc. are the possible sources of the video. Example: <video> <source src=”movie.mp4” /> <source src=”movie.flv” /> </video>
  17. <video> Attributes <video controls=“controls”> <source src=”movie.mp4” /> <source src=”movie.flv” /> </video>
  18. Video in HTML 4.01 Using <object> The <object> tag was introduced in the specifications for HTML 4 for the purpose of marking any kind of nontextualcontent. Parameters are passed using the <param> tag. <object data=”fun.swf” type=”application/x-shockwave-flash” width=”300” height=”200”> <param name=”movie” value=”fun.swf” /> <param name=“loop” value=“true” /> </object>
  19. YouTube: An Example of Nesting Elements <object width="425" height="344"> <param name="movie“ value="http://www.youtube.com/v/cd8RKJEk0EM&hl=en&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/cd8RKJEk0EM&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object>
  20. Embedding Applications with Java Objects Oak was developed by Sun Microsystems as an operating system intended to be used by common appliances and devices Oak was renamed Java in 1995 HotJava, a Java interpreter, runs programs written in the Java language
  21. Java Applets Applets are Java programs that run within a Web browser. Applets are displayed as embedded objects on a Web page in an applet window. Parameters are passed to the applet using the <param> tag. You use a Java Developer’s Kit (JDK) to write your own Java applet. Compiling changes the file into an executable file that can run by itself without the JDK. The executable file is called a class file (e.g., CreditRoll.class).
  22. Using <object> to Insert Java Applets To embed a Java applet, use the <object> element: <object type=”application/x-java-applet” width=”value” height=”value”> <param name=”code” value=”url” /> parameters for the applet </object> Parameters are specific to the applet you’re inserting. There may be many, a few, or none.
  23. Example of a Java Applet: CreditRoll <object type=”application/x-java-applet” width=”250” height=”250”> <param name=”code” value=”CreditRoll.class” /> <param name=“speed” value=“100” /> <param name=“repeat” value=“yes” /> <param name=“text1” value=“Royal Wedding” /> <param name=“text2” value=“Fred Astaire as Tom” /> <param name=“text3” value=“Jane Powell as Ellen” /> </object>
More Related