Languages
Pages
Legal
Nick [email protected]@NickFloro
Compression & Delivery with HTML5 | Media Formats
Media Delivery for Mobile Devices
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
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
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
PixelsGuidelines for Compression
mobile640 x 360
720P 1280 x 720
HD 1080i 1920 x 1080
Content PlacementGuidelines for Compression
320 x 240
Selecting a SizeGuidelines for Compression
384 x 216
480 x 270
640 x 360
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
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
Easy Access to VideoFlip $100 to $200
Smart Phones
Audio
Built-in Recorder
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
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 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
Sorenson Squeeze
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 CS
NLE
• Batch• QuickTime• Effects• Filters• Tools
Final Cut
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
<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
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
LaunchCycle.com
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Top Related