Compressing Media for Mobile and Desktop Delivery with HTML5
73
Nick Floro [email protected] @NickFloro Compressing Media for mobile & desktop delivery HTML5 | Media Formats
-
Upload
nick-floro -
Category
Technology
-
view
1.031 -
download
0
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 of Compressing Media for Mobile and Desktop Delivery with HTML5
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
