Audio and video on the web with a hint of flash
1 / 32

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

  • Updated 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

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Audio and Video on the Web – with a hint of Flash' - niveditha

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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

  • Channels of information

  • Mono and Stereo

  • More channels = more data

Bit rate l.jpg
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 l.jpg
Adding Sound to the Web

  • Copyright Restrictions

  • Royalty Free Sites



Streaming audio l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Video on the Web

  • They’re huge!

  • Streaming vs. nonstreaming

  • Similar to audio files

Movie length l.jpg
Movie Length

  • Keep it short!

  • Rule: If it’s over 2 minutes – stream it!

Frame size l.jpg
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 l.jpg
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)

Quality l.jpg

  • Describes overall quality of video image

  • Web – low or medium

    • High compression

  • Trade with frame rate or frame size

Color bit depth l.jpg
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 l.jpg
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!

Compression l.jpg

  • Compressing data that describes the sound and frame images

  • Lossless Versus Lossy Compression

  • Spatial Versus Temporal Compression

Codecs l.jpg

  • 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 l.jpg
File Formats

  • Windows Media (.wmv or .asf)

  • QuickTime Movie (.mov)

  • Real Media (.rm)

  • AVI (.avi)

  • MPEG (.mpg or .mpeg)

Adding video to your site l.jpg
Adding Video to your Site

  • Link

    • <a href=“”>Click here for the video!</a>

  • Streaming Video

    • Depends on the file type

  • Embedding Video

Flash l.jpg

  • 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 l.jpg
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 l.jpg
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

Disadvantages l.jpg

  • 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 l.jpg
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

Actionscript l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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)