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.

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. Flash & HTML 5
A file that tells the computer what
kind of media to present and
when to present it.
• Video
• Audio
• Text
• Flash
• Interactivity
• Tracks

3. 1991

4. 1999

8. The Production Process
Capture to delivery and beyond
Video / Audio Assets Compression Authoring Delivery

9. A Complete Solution
QuickTime takes you from capture to delivery and beyond
Delivery
Edit and Compose Playback
Capture Archive

10. ß

12. Standards Matter
Surround Video Digital
CD Stereo Sound HDTV DVD Camera Camera
MP3/
AAC
Player

13. Standards Are Everywhere
NTSC/
RedBook FM MPEG-2 PAL AC-3 DV JPEG
MPEG-1/
MPEG-4
audio

14. Family of MPEG Standards
The 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

15. Video

16. MPEG-4: The MPEG for the Internet
The 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

17. Guidelines for Compression
Pixels
HD 1080i 1920 x 1080
720P 1280 x 720
DV 720 x 486

18. Guidelines for Compression
Content Placement
320 x 240

19. Guidelines for Compression
Selecting a Size
640 x 480
512 x 384
320 x 240

25. Guidelines for Compression
Frame Rate
29.97 fps

26. Guidelines for Compression
Frame Rate
29.97 fps 15 fps

27. Guidelines for Compression
Tips & Hints
Key Frames: 4 x fps

28. Guidelines for Compression
2 Pass Variable Bit Rate

29. Guidelines for Compression
2 Pass Variable Bit Rate

30. Guidelines for Compression
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
WebM
• Flash: Spark / On2 Pro / H264

31. Easy Access to Video
Flip $100 to $200

32. Smart Phones

33. Audio

34. Selecting a Microphone
USB Connects Directly to Computer
Logitech 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

35. Skype
Record Directly
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/

36. Guidelines for Compression
Stereo or Mono

37. Guidelines for Compression
Selecting a Kilohertz
44khz 22khz
A kilohertz (kHz) is a unit of frequency equal to 1,000 hertz (1,000 cycles per second)

38. Compressing Audio
60 Seconds
• 11mb 16bit 44khz Stereo
• 2.8mb 16bit 22khz Mono
• 500k MP3 64k 44khz Mono

39. Compressing Audio
60 Minutes
660mb
60 minutes of
30mb
60 minutes Compressed
Uncompressed Audio MP3 Audio

41. Podcasts on the Go
AudioBoo & iPhone

42. Guidelines for Compression
Tips & Hints
• 16 bit Mono 22 khz
• MP3 64kbit/s Mono 22khz

43. Setting up a Studio
Costs
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

44. Browser Technologies
Percentage of Browser Enabled Viewers
Adobe Flash Player 99.1
Microsoft Windows Media Player 83.4
Apple QuickTime Player 67.7
0 25 50 75 100

45. Delivering Content Everywhere
New Form Factors

46. Flash vs HTML5
Select a format for delivery
Flash MPEG 4 H264 / Google WebM

47. Web Delivery: HTTP Streaming
Fast Start
Development Standard Web Server
Clients

51. Web Delivery: RTP/RTSP Streaming
QuickTime Streaming Server
Web Server
Streaming Server Client
Development

52. Compressing Content
QuickTime Pro
Sorenson Squeeze
Telestream Episode
Final Cut Pro
Flash

53. QuickTime Pro
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

54. HandBrake
OpenSource for Mac/Win/Linux
• MPEG-4
• H.264

55. Telestream Episode
One Tool for Everything
• MPEG-4
• Flash SWF
• Flash FLV
• QuickTime
• Real media
• MPEG 1/2
• MP3 Audio

56. Flash CS5
Authoring & Delivery
• Flash SWF
• Flash FLV

57. Final Cut
NLE
• Batch
• QuickTime
• Effects
• Filters
• Tools

58. Video Compression
Flash

59. <!-- 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>

60. // HTML 5 makes
<video> as easy
as <img>
// HTML 5 makes <video> as easy as <img>

61. Video Compression
HTML 5 Options
Flash H264 Ogg Theora
MPEG 4 WebM

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

63. 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();

64. Resources

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

66. Resources
Flash Video for Professionals:
Expert Techniques for Integrating
Video on the Web
• Lisa Larson, Renee Costantini

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

68. www.brightcove.com

69. www.hosting.com

70. Screencasts 101 Mini-Session
www.jingproject.com

71. www.posterous.com

77. www.longtailvideo.com

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

79. www.TED.com

80. www.twitter.com

81. www.lrnchat.com

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

83. www.launchcycle.com

84. 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