0
Are you on Twitter? Why not?Join today and participate in the conference backchannel #mlearningdevcon     Introduction to ...
Flash & HTML 5A file that tells the computer whatkind of media to present andwhen to present it.•   Video•   Audio•   Text•...
1991
1999
The Production Process Capture to delivery and beyondVideo / Audio Assets   Compression   Authoring   Delivery
A Complete SolutionQuickTime takes you from capture to delivery and beyond                                Delivery        ...
ß
Standards Matter                    Surround             Video    Digital      CD   Stereo    Sound HDTV   DVD   Camera   ...
Standards Are Everywhere                         NTSC/   RedBook   FM   MPEG-2 PAL   AC-3   DV   JPEGMPEG-1/MPEG-4 audio
Family of MPEG StandardsThe foundation for all digital media        MPEG-1              MPEG-2          MPEG-4         VHS...
Video
MPEG-4: The MPEG for the InternetThe standard for the digital media revolution•   Original DV 60 sec 266mb•   MPEG-4 = 450...
Guidelines for CompressionPixels    HD 1080i 1920 x 1080            720P 1280 x 720                           DV 720 x 486
Guidelines for CompressionContent Placement         320 x 240
Guidelines for CompressionSelecting a Size              640 x 480                          512 x 384                      ...
Guidelines for CompressionFrame Rate   29.97 fps
Guidelines for CompressionFrame Rate   29.97 fps                 15 fps
Guidelines for CompressionTips & Hints Key Frames: 4 x fps
Guidelines for Compression2 Pass Variable Bit Rate
Guidelines for Compression2 Pass Variable Bit Rate
Guidelines for CompressionTips & Hints•   Frame Rate: 15 fps    –   Key Frames: 4 x fps•   Data Rate Target 800-1200 kbs• ...
Easy Access to VideoFlip $100 to $200
Smart Phones
Audio
Selecting a MicrophoneUSB Connects Directly to ComputerLogitech USB Desktop                      Logitech ClearChat Pro   ...
SkypeRecord DirectlyAudacityhttp://audacity.sourceforge.net/EasyVoipRecorder Recorder (Windows)http://www.easyvoiprecorder...
Guidelines for CompressionStereo or Mono
Guidelines for Compression   Selecting a Kilohertz               44khz                                                    ...
Compressing Audio60 Seconds•   11mb 16bit 44khz Stereo•   2.8mb 16bit 22khz Mono•   500k MP3 64k 44khz Mono
Compressing Audio60 Minutes660mb60 minutes of                     30mb                     60 minutes CompressedUncompress...
Podcasts on the GoAudioBoo & iPhone
Guidelines for CompressionTips & Hints•   16 bit Mono 22 khz•   MP3 64kbit/s Mono 22khz
Setting up a StudioCosts  Computer $1,199            Software $994                                Camera / Studio $1,470  ...
Browser Technologies     Percentage of Browser Enabled Viewers            Adobe Flash Player                              ...
Delivering Content EverywhereNew Form Factors
Flash vs HTML5Select a format for delivery Flash                    MPEG 4   H264 / Google WebM
Web Delivery: HTTP StreamingFast Start Development   Standard Web Server                                     Clients
Web Delivery: RTP/RTSP StreamingQuickTime Streaming Server                       Web Server                     Streaming ...
Compressing ContentQuickTime ProSorenson SqueezeTelestream EpisodeFinal Cut ProFlash
QuickTime ProDozens of professional features•   Hint movies for streaming•   Automate with AppleScript•   Edit movie clips...
HandBrakeOpenSource for Mac/Win/Linux• MPEG-4• H.264
Telestream EpisodeOne Tool for Everything•   MPEG-4•   Flash SWF•   Flash FLV•   QuickTime•   Real media•   MPEG 1/2•   MP...
Flash CS5Authoring & Delivery• Flash SWF• Flash FLV
Final CutNLE•   Batch•   QuickTime•   Effects•   Filters•   Tools
Video Compression    Flash
<!-- flash movie & bullets -->	   <div id="flashholder">	   	    <div id="flash">	   	    	   <script language="javascript...
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
Video CompressionHTML 5 Options     Flash       H264     Ogg Theora                 MPEG 4   WebM
Embedding Video<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 ...
Resources
Compression for Great Video and Audio, MasterTips and Common Sense
ResourcesFlash Video for Professionals:Expert Techniques for IntegratingVideo on the Web• Lisa Larson, Renee Costantini
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 Floro            sealworks interactive studios            nick@sealworks.com            www.seal...
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
Upcoming SlideShare
Loading in...5
×

Intro to Compression: Audio and Video Optimization for Learning

6,385

Published on

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"

  1. 1. Are you on Twitter? Why not?Join today and participate in the conference backchannel #mlearningdevcon Introduction to Compressing Video & Audio Flash & HTML5 Nick@sealworks.com Twitter.com/NickFloro
  2. 2. Flash & HTML 5A file that tells the computer whatkind of media to present andwhen to present it.• Video• Audio• Text• Flash• Interactivity• Tracks
  3. 3. 1991
  4. 4. 1999
  5. 5. The Production Process Capture to delivery and beyondVideo / Audio Assets Compression Authoring Delivery
  6. 6. A Complete SolutionQuickTime takes you from capture to delivery and beyond Delivery Edit and Compose Playback Capture Archive
  7. 7. ß
  8. 8. Standards Matter Surround Video Digital CD Stereo Sound HDTV DVD Camera Camera MP3/ AAC Player
  9. 9. Standards Are Everywhere NTSC/ RedBook FM MPEG-2 PAL AC-3 DV JPEGMPEG-1/MPEG-4 audio
  10. 10. Family of MPEG StandardsThe foundation for all digital media MPEG-1 MPEG-2 MPEG-4 VHS Quality DVD Quality Wireless, Internet 1.5 Mbps 6 Mbps Scalable 1992 1994 1998
  11. 11. Video
  12. 12. MPEG-4: The MPEG for the InternetThe standard for the digital media revolution• 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
  13. 13. Guidelines for CompressionPixels HD 1080i 1920 x 1080 720P 1280 x 720 DV 720 x 486
  14. 14. Guidelines for CompressionContent Placement 320 x 240
  15. 15. Guidelines for CompressionSelecting a Size 640 x 480 512 x 384 320 x 240
  16. 16. Guidelines for CompressionFrame Rate 29.97 fps
  17. 17. Guidelines for CompressionFrame Rate 29.97 fps 15 fps
  18. 18. Guidelines for CompressionTips & Hints Key Frames: 4 x fps
  19. 19. Guidelines for Compression2 Pass Variable Bit Rate
  20. 20. Guidelines for Compression2 Pass Variable Bit Rate
  21. 21. Guidelines for CompressionTips & 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 WebM• Flash: Spark / On2 Pro / H264
  22. 22. Easy Access to VideoFlip $100 to $200
  23. 23. Smart Phones
  24. 24. Audio
  25. 25. Selecting a MicrophoneUSB Connects Directly to ComputerLogitech USB Desktop Logitech ClearChat Pro Samson CO1U USB Microphone $20 USB Headset $40 Condenser Microphone $70 Blue Microphones Snowball Blue Microphones Yeti USB Microphone $89 USB Microphone $149
  26. 26. SkypeRecord DirectlyAudacityhttp://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/
  27. 27. Guidelines for CompressionStereo or Mono
  28. 28. Guidelines for Compression Selecting a Kilohertz 44khz 22khzA kilohertz (kHz) is a unit of frequency equal to 1,000 hertz (1,000 cycles per second)
  29. 29. Compressing Audio60 Seconds• 11mb 16bit 44khz Stereo• 2.8mb 16bit 22khz Mono• 500k MP3 64k 44khz Mono
  30. 30. Compressing Audio60 Minutes660mb60 minutes of 30mb 60 minutes CompressedUncompressed Audio MP3 Audio
  31. 31. Podcasts on the GoAudioBoo & iPhone
  32. 32. Guidelines for CompressionTips & Hints• 16 bit Mono 22 khz• MP3 64kbit/s Mono 22khz
  33. 33. Setting up a StudioCosts Computer $1,199 Software $994 Camera / Studio $1,470 Sanyo HD $400 16gb Video SD $55 MacBook Pro $1,199 Premiere CS4 $699 or Final Cut $995 Flood Lighting $395 Green Screen $200 Boris Chroma FX $295 Tripod $125 Lavalier Microphone $295 Apple iMac $1,199
  34. 34. Browser Technologies Percentage of Browser Enabled Viewers Adobe Flash Player 99.1Microsoft Windows Media Player 83.4 Apple QuickTime Player 67.7 0 25 50 75 100
  35. 35. Delivering Content EverywhereNew Form Factors
  36. 36. Flash vs HTML5Select a format for delivery Flash MPEG 4 H264 / Google WebM
  37. 37. Web Delivery: HTTP StreamingFast Start Development Standard Web Server Clients
  38. 38. Web Delivery: RTP/RTSP StreamingQuickTime Streaming Server Web Server Streaming Server Client Development
  39. 39. Compressing ContentQuickTime ProSorenson SqueezeTelestream EpisodeFinal Cut ProFlash
  40. 40. QuickTime ProDozens 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
  41. 41. HandBrakeOpenSource for Mac/Win/Linux• MPEG-4• H.264
  42. 42. Telestream EpisodeOne Tool for Everything• MPEG-4• Flash SWF• Flash FLV• QuickTime• Real media• MPEG 1/2• MP3 Audio
  43. 43. Flash CS5Authoring & Delivery• Flash SWF• Flash FLV
  44. 44. Final CutNLE• Batch• QuickTime• Effects• Filters• Tools
  45. 45. Video Compression Flash
  46. 46. <!-- 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>
  47. 47. // HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
  48. 48. Video CompressionHTML 5 Options Flash H264 Ogg Theora MPEG 4 WebM
  49. 49. Embedding Video<video src="http://example.com/myMovie.ogg" controls>Your browser does not support the video element.</video>
  50. 50. 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();
  51. 51. Resources
  52. 52. Compression for Great Video and Audio, MasterTips and Common Sense
  53. 53. ResourcesFlash Video for Professionals:Expert Techniques for IntegratingVideo on the Web• Lisa Larson, Renee Costantini
  54. 54. http://www.telestream.net/episode/overview.htm
  55. 55. www.brightcove.com
  56. 56. www.hosting.com
  57. 57. Screencasts 101 Mini-Session www.jingproject.com
  58. 58. www.posterous.com
  59. 59. www.longtailvideo.com
  60. 60. http://www.telestream.net/screen-flow/
  61. 61. www.TED.com
  62. 62. www.twitter.com
  63. 63. www.lrnchat.com
  64. 64. Download the Presentation at:http://www.slideshare.net/nickfloro
  65. 65. www.launchcycle.com
  66. 66. Thank You Nick Floro sealworks interactive studios nick@sealworks.com www.sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×