1 / 32

Audio and Video on the Web – with a hint of Flash

Audio and Video on the Web – with a hint of Flash INLS 572 · Christie McDaniel Audio Files – A Broad Overview Audio files were once large, chunky awful things to deal with on the Web Streaming audio was born – files that play as they download Live Broadcasts Long Audio MP3

niveditha
Download Presentation

Audio and Video on the Web – with a hint of Flash

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. Audio and Video on the Web – with a hint of Flash INLS 572 · Christie McDaniel

  2. Audio Files – A Broad Overview • Audio files were once large, chunky awful things to deal with on the Web • Streaming audio was born – files that play as they download • Live Broadcasts • Long Audio • MP3 • Makes audio files one-tenth of their normal size

  3. Analog becomes Digital • It’s all in the signals • Encoding – when analog signals are converted into digital data via bits and bytes • Some file formats, like MPEG are compressed during encoding • Certain Settings are determined by the user

  4. Sampling Rate • Sampling Rate – the number of samples per second taken from a signal to make a digital description (discrete signal) • The higher the sampling rate, the more accurate the digital description will be • Measured in kilohertz (kHz) • CDs = 44.1 kHz • Transistor radio = 8 kHz • DVDs = 96K

  5. Bit Depth • Bit Depth is the amount of data contained in each sample of audio taken in the sampling rate procedure per second • CD Quality = 16-bits • High-End Digital Audio = 48-bit depths

  6. Channels • Channels of information • Mono and Stereo • More channels = more data

  7. Bit Rate • All 3 combined • Bit rate is “the number of bits per second devoted to storing audio data” (Niederst-Robbins, 2006) • Measured in Kbps • Smaller than Internet connection

  8. Adding Sound to the Web • Copyright Restrictions • Royalty Free Sites • http://www.partnersinrhyme.com/ • http://www.flyinghands.com/

  9. Streaming Audio • Downloaded Audio • Streaming Audio is more efficient • Data Packets • User Datagram Protocol (UDP) • RealTime Streaming Protocol (RTSP) • RealTime Transfer Protocol (RTP) • Pseudostreaming

  10. Audio File Formats • WAV/AIFF • .wav, .aif, .aiff • MP3 - .mp3 • Apple QuickTime Audio - .mov • MIDI - .mid • RealMedia/RealAudio - .rm, .ra • Windows Media • .wma, .asf • AAC • .m4a, .m4p, .mp4

  11. Audio Files on the Web • Simple Link - <a href=“audio.mp3”>Play it!</a> • Background Noise • <embed src=“filename.mid” autostart=“true” hidden=“true”></embed>

  12. Video on the Web • They’re huge! • Streaming vs. nonstreaming • Similar to audio files

  13. Movie Length • Keep it short! • Rule: If it’s over 2 minutes – stream it!

  14. Frame Size • Bigger frame = bigger file size • Full Screen = 640 x 480 Pixels • Web Videos = 320 x 240 Pixels • Minimal = 160 x 120 Pixels

  15. Frame Rate • frames per second (fps) • Frame Rate creates smooth movement • TV = 30 fps • Web = 15 or 10 fps • Can even be 0.05 fps (slideshows)

  16. Quality • Describes overall quality of video image • Web – low or medium • High compression • Trade with frame rate or frame size

  17. Color bit depth • Number of pixel colors per frame • 24-bit to 8-bit depth • Reduces file size, but sacrifices quality

  18. Data rate (bit rate) • “The rate at which data must be transferred for the video to play smoothly without interruption” (Niederst) • Kbps • K (size of the file)/bps (length of the movie) • For streaming video, this is important!

  19. Compression • Compressing data that describes the sound and frame images • Lossless Versus Lossy Compression • Spatial Versus Temporal Compression

  20. Codecs • Codecs are compression/decompression algorithms • Sorrenson – lower data rates for low bandwidth; lots of processing power • H.264/AVC – good quality with very reduced bit rates – the latest, greatest codec • Windows Media Video Codec – for use only with Windows Media Player • MPEG – only for use when your video file will be an MPEG • Intel Indeo – spatial and temporal compression, with lossy compression; high-end machines are necessary • Radius Cinepak – provides spatial, temporal, and lossy compression; however produces grainy videos. Outdated codec. • Animation – your video must be all computer-generated.

  21. File Formats • Windows Media (.wmv or .asf) • QuickTime Movie (.mov) • Real Media (.rm) • AVI (.avi) • MPEG (.mpg or .mpeg)

  22. Adding Video to your Site • Link • <a href=“yourvideo.mov”>Click here for the video!</a> • Streaming Video • Depends on the file type • Embedding Video

  23. Flash • Started as a way to add animation to the Web (1996) • Flash is the .swf file from Flash (formerly Macromedia, now Adobe) AND the Flash plug-in to view the movies • Uses ActionScript as its procedural language

  24. Use on/as a Web page • Art and motion graphics • Animation and cartooning • Splash pages, intros, and ad banners • Interaction and navigation • Multimedia web sites • Video and audio players • E-commerce • Rich media applications • Data and statistical applications • Web-based training • Distance learning • Live communication

  25. Advantages of Flash • File sizes are small • It is scalable • Image quality is high • It uses streaming technology • Integrated audio and video • Flash format is well-supported • It is scriptable • It has an open format • Font sets are transferable • Consistency

  26. Disadvantages • Plug-in is required • Older flash and .swf is not section 508 compliant • It always starts on the initial page of the movie • Unix support is limited • Authoring software is required

  27. Flash Movies • .fla – source file • Flash document or flash editor document • Contains all of the separate elements that make up that movie and it’s timeline information in an editable format • To prepare the file for the Web, you change it to .swf • .swf – Shockwave Flash file

  28. ActionScript • Flash uses this to add behaviors and interactivity to your movies • ActionScript is an object-oriented programming language • OO Programming uses objects to design applications and computer programs • Think of objects as containers • Ex: Python • It’s very similar to JavaScript

  29. Exporting to the Web • Use the <object> and <embed> tags • <object> • Defines an embedded object • Can go inside the <body> OR <head> • Tells the browser to download and install the particular ActiveX player for Flash files and allows you to set many of the attributes for the movie • See http://www.w3schools.com/tags/tag_object.asp • <embed> • Puts a browser plug-in on a page • It is NOT standards compliant • It’s old HTML (ie, < 4.01)

  30. More on Flash • It can be integrated with other programs like QuickTime or RealMedia • Dreamweaver lets you add Flash elements to a web page with a GUI

  31. The Many Faces of the Flash Player • Plug-in for the browser • Stand-alone for the client • Flash-Player for Pocket PCs • FlashLite – for mobile phones

  32. A note … • Generally, it’s not a good idea to require your users to save a plug-in • As soon as they see that they have to take an extra step to view your content, they won’t do it • Even though plug-ins are more browser friendly now (with modern browsers), many users still don’t use updated browsers (installation inertia)

More Related