delivering video on the web | html 5 & flash
TRANSCRIPT
A file that tells the computer what kind of media to present and when to present it.
• Video• Audio• Text• Flash• Interactivity• Tracks
Flash & HTML 5
1991
1999
The Web Platform is Accelerating
One video to play everywhere.
ß
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 Are Everywhere
MPEG-1/MPEG-4
audio
MPEG-2RedBook JPEGAC-3FM DVNTSC/
PAL
Video
• 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
MPEG-4: The MPEG for the InternetThe standard for the digital media revolution
PixelsGuidelines for Compression
DV 720 x 486
720P 1280 x 720
HD 1080i 1920 x 1080
Content PlacementGuidelines for Compression
320 x 240
Selecting a SizeGuidelines for Compression
320 x 240
512 x 384
640 x 480
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
• Frame Rate: 15 fps– Key Frames: 4 x fps
• 2 Pass Variable Bit Rate
• QuickTime: Sorenson 3 / MPEG 4 / H264
• Flash: Spark / On2 Pro / H264
Guidelines for Compression
Easy Access to VideoFlip $100 to $200
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
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
Percentage of Browser Enabled ViewersBrowser Technologies
Adobe Flash Player
Microsoft Windows Media Player
Apple QuickTime Player
0 25 50 75 100
67.7
83.4
99.1
New Form FactorsDelivering Content Everywhere
Select a format for deliveryFlash vs HTML5
Flash H264 / Google WebMMPEG 4
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
Telestream Episode
Authoring & Delivery
• Flash SWF• Flash FLV
Flash CS5
NLE
• Batch• QuickTime• Effects• Filters• Tools
Final Cut
Video Compression
Flash
<!-- 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>
// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>
HTML 5 OptionsVideo Compression
Flash H264MPEG 4
Ogg Theora WebM
<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 the video element.</video>
var v = document.getElementsByTagName("video")[0];v.play();
Embedding Video
Client Installation
Installing Flash
Resources
Create Your Own YouTubeResources
http://www.onlamp.com/pub/a/php/2007/05/24/creating-mytube-with-flex-and-php.html?page=1
QuickTime: Visual QuickStart Guide
• For Windows and Macintosh
• Judith Stern & Robert Lettieri
Resources
Flash Video for Professionals: Expert Techniques for Integrating Video on the Web
• Lisa Larson, Renee Costantini
Resources
http://www.telestream.net/episode/overview.htm
http://www.telestream.net/flip4mac-wmv/overview.htm
Screencasts 101 Mini-Session
www.jingproject.com
http://www.telestream.net/screen-flow/
www.TED.com
http://www.flickr.com/photos/fraserspeirs/sets/72157623224262135/
www.twitter.com
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro