audio and video on the web with a hint of flash l.
Skip this Video
Loading SlideShow in 5 Seconds..
Audio and Video on the Web – with a hint of Flash PowerPoint Presentation
Download Presentation
Audio and Video on the Web – with a hint of Flash

Loading in 2 Seconds...

play fullscreen
1 / 32

Audio and Video on the Web – with a hint of Flash - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
audio files a broad overview
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
analog becomes digital
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
sampling rate
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
bit depth
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
  • Channels of information
  • Mono and Stereo
  • More channels = more data
bit rate
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
adding sound to the web
Adding Sound to the Web
  • Copyright Restrictions
  • Royalty Free Sites
streaming audio
Streaming Audio
  • Downloaded Audio
  • Streaming Audio is more efficient
  • Data Packets
  • User Datagram Protocol (UDP)
  • RealTime Streaming Protocol (RTSP)
  • RealTime Transfer Protocol (RTP)
  • Pseudostreaming
audio file formats
Audio File Formats
    • .wav, .aif, .aiff
  • MP3 - .mp3
  • Apple QuickTime Audio - .mov
  • MIDI - .mid
  • RealMedia/RealAudio - .rm, .ra
  • Windows Media
    • .wma, .asf
  • AAC
    • .m4a, .m4p, .mp4
audio files on the web
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>
video on the web
Video on the Web
  • They’re huge!
  • Streaming vs. nonstreaming
  • Similar to audio files
movie length
Movie Length
  • Keep it short!
  • Rule: If it’s over 2 minutes – stream it!
frame size
Frame Size
  • Bigger frame = bigger file size
  • Full Screen = 640 x 480 Pixels
  • Web Videos = 320 x 240 Pixels
  • Minimal = 160 x 120 Pixels
frame rate
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)
  • Describes overall quality of video image
  • Web – low or medium
    • High compression
  • Trade with frame rate or frame size
color bit depth
Color bit depth
  • Number of pixel colors per frame
  • 24-bit to 8-bit depth
  • Reduces file size, but sacrifices quality
data rate bit rate
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!
  • Compressing data that describes the sound and frame images
  • Lossless Versus Lossy Compression
  • Spatial Versus Temporal Compression
  • 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.
file formats
File Formats
  • Windows Media (.wmv or .asf)
  • QuickTime Movie (.mov)
  • Real Media (.rm)
  • AVI (.avi)
  • MPEG (.mpg or .mpeg)
adding video to your site
Adding Video to your Site
  • Link
    • <a href=“”>Click here for the video!</a>
  • Streaming Video
    • Depends on the file type
  • Embedding Video
  • 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
use on as a web page
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
advantages of flash
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
  • 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
flash movies
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
  • 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
exporting to the web
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
  • <embed>
    • Puts a browser plug-in on a page
    • It is NOT standards compliant
    • It’s old HTML (ie, < 4.01)
more on flash
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
the many faces of the flash player
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
a note
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)