compressing media for mobile and desktop delivery with html5
DESCRIPTION
In this session, a comprehensive introduction to video and audio compression, you’ll learn the best delivery standards for optimizing content delivery to mobile and desktop devices; the session will provide an overview of everything you need to know about editing, preparing, and delivering the highest-quality video and audio to your audience. We’ll discuss techniques and interactivity that can be added, as well as the latest standards and how you can take advantage of open-source, free compression tools, as well as the latest applications for getting the smallest file sizes and the highest quality.TRANSCRIPT
Nick [email protected]@NickFloro
Compressing Mediafor mobile & desktop delivery
HTML5 | Media Formats
A file that tells a device what kind of media to present and when to present it.
• Video• Audio• Text• Interactivity• Tracks
Media
1991
1999
Pixel Doubling
Pixel Doubling
Capture to delivery and beyondThe Production Process
Video / Audio Assets Compression Authoring Delivery
Capture to delivery and beyondQuickTime
Delivery
Edit and Compose Playback
Capture Archive
ß
Standards Matter
MP3/AAC
Player
SurroundSoundCD
DigitalCameraDVDStereo
VideoCameraHDTV
Phone Tablet
Standards Are Everywhere
MPEG-1/MPEG-4
audio
MPEG-2RedBook JPEGAC-3FM DVNTSC/
PAL
Phone Tablet
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
• HD 1920 x 1080 = 600mb
• Compressed = 450k to 7.8mb
MPEG-4: The MPEG for the Internet1 Minute of Content
• HD 1920 x 1080 = 35gb
• Compressed = 480mb
MPEG-4: The MPEG for the Internet60 Minutes of Content
HD 1080i 1920 x 1080
PixelsGuidelines for Compression
SD 720P 720 x 480
HD 1080i 1920 x 1080
Selecting a SizeGuidelines for Compression
384 x 216480 x 270
640 x 360
Content PlacementGuidelines for Compression
384 x 216
Frame RateGuidelines for Compression
29.97 fps
29.97 fps 15 fps
Frame RateGuidelines for Compression
Tips & Hints
Key Frames: 4 x fps
Guidelines for Compression
Guidelines for CompressionAverage Data Rate Target 800-1200 kbs
Guidelines for Compression2 Pass Variable Bit Rate
Guidelines for Compression2 Pass Variable Bit Rate
Tips & Hints
Compression– Frame Rate: 15 fps– Key Frames: 4 x fps– Average Data Rate Target 800-1200 kbs– 2 Pass Variable Bit Rate
QuickTime: H264 / Sorenson 3
Flash: H264 / Spark / WebM On2 Pro
Guidelines for Compression
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
Built-in Recorder
Tips & Hints
• 16 bit Mono 22 khz
• MP3 64kbit/s Mono 22khz
Guidelines for Compression
Setting up a StudioCosts
Computer $899 Software $595 Camera / Studio $1,470
Adobe Premiere or Final Cut $300
Boris Chroma FX $295
HD Video $400 32gb Video SD $25
Green Screen $200
Lavalier Microphone $295Tripod $125
Flood Lighting $395
Apple iMac $1,099
MacBook $899
New Form FactorsDelivering Content Everywhere
WebMGoogle
H264 | MPEG 4Apple | Microsoft
mp4
Formats to choose from:Select a format for delivery
WebMGoogle
H264 | MPEG 4Apple | Microsoft
mp4
Formats to choose from:Select a format for delivery
Fast StartWeb Delivery: HTTP Streaming
Development Web Server | LMS | CMS
Clients
Pixel Doubling
Pixel Doubling
CDNContent Delivery Networks
DevelopmentEast Coast Client
West Coast Europe
Web Server | LMS | CMS
QuickTime Pro
Sorenson Squeeze
Telestream Episode
Final Cut Pro
Flash
Handbrake
Compressing Content
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
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
<video controls><source src="foo.webM" 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
ResourcesTo help you grow.
http://www.telestream.net/episode/overview.htm
http://www.telestream.net/flip4mac-wmv/overview.htm
http://www.telestream.net/screen-flow/
www.TED.com
www.twitter.com
Download the Presentation at:http://www.slideshare.net/nickfloro
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro