Video & Audio

Nick@sealworks.comTwitter.com/NickFloro

Introduction to Compressing

Are you on Twitter? Why not?Join today and participate in the conference backchannel #mlearningdevcon

Flash & HTML5

A file that tells the computer what kind of media to present and when to present it.

• Video• Audio• Text• Flash• Interactivity• Tracks

Flash & HTML 5

1991

1999

Capture to delivery and beyondThe Production Process

Authoring DeliveryVideo / Audio Assets Compression

QuickTime takes you from capture to delivery and beyondA Complete Solution

Delivery

Edit and Compose Playback

Capture Archive

ß

Standards Matter

MP3/AAC

Player

SurroundSoundCD

DigitalCameraDVDStereo

VideoCameraHDTV

Standards Are Everywhere

MPEG-1/MPEG-4

audio

MPEG-2RedBook JPEGAC-3FM DVNTSC/

PAL

The foundation for all digital mediaFamily of MPEG Standards

MPEG-1VHS Quality

1.5 Mbps1992

MPEG-2DVD Quality

6 Mbps1994

MPEG-4Wireless, Internet

Scalable1998

Video

• Original DV 60 sec 266mb

• MPEG-4 = 450k to 7.8mb

• Flash 8+ = 450k to 7.8mb

• 60 minutes of Video = 16gb

• 60 minutes compressed = 480mb

MPEG-4: The MPEG for the InternetThe standard for the digital media revolution

PixelsGuidelines for Compression

DV 720 x 486

720P 1280 x 720

HD 1080i 1920 x 1080

Content PlacementGuidelines for Compression

320 x 240

Selecting a SizeGuidelines for Compression

320 x 240

512 x 384

640 x 480

Frame RateGuidelines for Compression

29.97 fps

Frame RateGuidelines for Compression

29.97 fps 15 fps

Tips & Hints

Key Frames: 4 x fps

Guidelines for Compression

Guidelines for Compression2 Pass Variable Bit Rate

Guidelines for Compression2 Pass Variable Bit Rate

Tips & Hints

• Frame Rate: 15 fps– Key Frames: 4 x fps

• Data Rate Target 800-1200 kbs

• 2 Pass Variable Bit Rate

• QuickTime: Sorenson 3 / H264

• Flash: Spark / On2 Pro / H264

Guidelines for Compression

WebM

Easy Access to VideoFlip $100 to $200

Smart Phones

Audio

Selecting a MicrophoneUSB Connects Directly to Computer

Samson CO1U USB Condenser Microphone $70

Logitech USB Desktop Microphone $20

Logitech ClearChat Pro USB Headset $40

Blue Microphones Yeti USB Microphone $149

Blue Microphones Snowball USB Microphone $89

Audacity http://audacity.sourceforge.net/

EasyVoipRecorder Recorder (Windows) http://www.easyvoiprecorder.org/

Hot Recorder (Windows) http://www.hotrecorder.com/

Call Recorder (Mac OS X) http://www.ecamm.com/mac/callrecorder/

SkypeRecord Directly

Stereo or MonoGuidelines for Compression

Selecting a KilohertzGuidelines for Compression

44khz 22khz

A kilohertz (kHz) is a unit of frequency equal to 1,000 hertz (1,000 cycles per second)

• 11mb 16bit 44khz Stereo

• 2.8mb 16bit 22khz Mono

• 500k MP3 64k 44khz Mono

Compressing Audio60 Seconds

Compressing Audio60 Minutes

30mb660mb60 minutes Compressed MP3 Audio

60 minutes of Uncompressed Audio

Podcasts on the GoAudioBoo & iPhone

Tips & Hints

• 16 bit Mono 22 khz

• MP3 64kbit/s Mono 22khz

Guidelines for Compression

Setting up a StudioCosts

Computer $1,199 Software $994 Camera / Studio $1,470

Premiere CS4 $699 or Final Cut $995

Boris Chroma FX $295

Sanyo HD $400 16gb Video SD $55

Green Screen $200

Lavalier Microphone $295Tripod $125

Flood Lighting $395

Apple iMac $1,199

MacBook Pro $1,199

Percentage of Browser Enabled ViewersBrowser Technologies

Adobe Flash Player

Microsoft Windows Media Player

Apple QuickTime Player

0 25 50 75 100

67.7

83.4

99.1

New Form FactorsDelivering Content Everywhere

Select a format for deliveryFlash vs HTML5

Flash H264 / Google WebMMPEG 4

Fast StartWeb Delivery: HTTP Streaming

Development Standard Web Server

Clients

QuickTime Streaming ServerWeb Delivery: RTP/RTSP Streaming

Development Streaming Server Client

Web Server

QuickTime Pro

Sorenson Squeeze

Telestream Episode

Final Cut Pro

Flash

Compressing Content

Dozens of professional features

• Hint movies for streaming• Automate with AppleScript• Edit movie clips from digital

cameras• Convert and resize pictures• Enhance movies and stills with

filters and effects

QuickTime Pro

HandBrakeOpenSource for Mac/Win/Linux

• MPEG-4• H.264

One Tool for Everything

• MPEG-4• Flash SWF• Flash FLV• QuickTime• Real media• MPEG 1/2• MP3 Audio

Telestream Episode

Authoring & Delivery

• Flash SWF• Flash FLV

Flash CS5

NLE

• Batch• QuickTime• Effects• Filters• Tools

Final Cut

Video Compression

Flash

<!-- flash movie & bullets --> <div id="flashholder"> <div id="flash"> <script language="javascript"> if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '320', 'height', '310', 'src', '../FLV_Player', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'FLV_Player', 'bgcolor', '#ffffff', 'name', 'FLV_Player', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','always', 'movie', '../FLV_Player', 'salign', '' ); //end AC code } </script> <noscript>

// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>

HTML 5 OptionsVideo Compression

Flash H264MPEG 4

Ogg Theora WebM

<video src="http://example.com/myMovie.ogg" controls>Your browser does not support the video element.</video>

Embedding Video

<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>

var v = document.getElementsByTagName("video")[0];v.play();

Embedding Video

Resources

Compression for Great Video and Audio, Master Tips and Common Sense

Flash Video for Professionals: Expert Techniques for Integrating Video on the Web

• Lisa Larson, Renee Costantini

Resources

http://www.telestream.net/episode/overview.htm

www.brightcove.com

www.hosting.com

Screencasts 101 Mini-Session

www.jingproject.com

www.posterous.com

www.longtailvideo.com

http://www.telestream.net/screen-flow/

www.TED.com

www.twitter.com

www.lrnchat.com

Download the Presentation at:http://www.slideshare.net/nickfloro

www.launchcycle.com

Thank You

Nick Florosealworks interactive studios

nick@sealworks.comwww.sealworks.com

twitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro