Chapter 4 Audio and video compression 4.1 Introduction 4.2 audio compression 4.3 Video compression.
Intro to Compression: Audio and Video Optimization for Learning
84
Video & Audio [email protected] Twitter.com/NickFloro Introduction to Compressing Are you on Twitter? Why not? Join today and participate in the conference backchannel #mlearningdevcon Flash & HTML5
-
Upload
nick-floro -
Category
Technology
-
view
6.204 -
download
0
description
Learn how to compress audio and video for delivery to desktop and mobile devices today. Learn how to use HTML5 and Flash as well as best practices from editing, compression and delivery of content.
Transcript of Intro to Compression: Audio and Video Optimization for Learning
Video & Audio
[email protected]/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
Screencasts 101 Mini-Session
www.jingproject.com
http://www.telestream.net/screen-flow/
www.TED.com
www.twitter.com
Download the Presentation at:http://www.slideshare.net/nickfloro
www.launchcycle.com
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
