SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
Video Content Handling
Ahsan Saleem
August, 2013
Agenda
1.  Problem
2.  Key Terms
3.  Youtube Video handling/guidelines
4.  Suggested video handling guidelines
a. 
b. 

Standard resolution and aspect ratios cases
Non-standard cases

5.  Useful resources
Problem
●  Multiple playback platforms: Web, FB,
iPhone, iPad, Android devices
●  Free form video upload, any resolution or
aspect ratio expected
●  Achieve consistent video experience
●  Avoid too many video outputs
●  Avoid complex calculations
Key Terms
Aspect Ratio: Width to height pixel ratio of video arranged
as x:y - Note its a ratio and NOT pixel size of video. 4:3
and 16:9 are the most common ones
Orientation: Portrait or Landscape depends on how video
was shot (Camera Vertical or Horizontal)
Video Resolution: Number of horizontal and vertical
pixels. For example: 1280 x 720 (width x height).
Widescreen: Any video with width:height pixel ratio greater
than 1.37:1 on width side
Key Terms
Frame Rate: Frequency of images displayed called frames
(frames per second). 24FPS is a progressive common
format for film and 30FPS also common for digital video.
Video Codec: Format video is compressed and encoded in
H.264 (High Profile) is a common standard mp4 & flash.
Google recently switched to VP8 / libvpx
Progressive Scan (720p): Displaying or storing video in
which each frame is drawn in order.
Interlace Scan (720i): Displaying or storing video in which
odd then even lines are drawn. Used by analog TV.
Key Terms
Audio Codec: Format that audio is encoded in along side
video. Common formats are AAC (mp4, m4v) & MP3.
Audio Channels: Mono (Single) Stereo (Left & Right) or
5.1 (Dolby 5 Speakers)
Anamorphic Video : Video footage shot intentionally on
3:2 ratio (35MM Film) then stretched to fit widescreen
2.40:1 ratio.
Key Terms
Standard Definition (SDTV): Often 4:3 Ratio with video
quality less than 720P
High-Definition (HDTV): 720p, 1080i and 180p
Enhanced-Definition (EDTV): 480p
4k Resolution: Future standard for HD cameras shot at
3840x2160
Key Terms
Standard Video Qualities: Standard combinations of aspect
ratio and video resolution
Video Quality

4:3 Aspect Ratio Resolution

16:9 Aspect Ratio Resolution

360p

480 x 360

640 x 360

480p

640 x 480

854 x 480

720p

Not generally used

1280 x 720

1080p

Not generally used

1920 x 1280
Letterboxing
Letterboxing is practice to fit wide-screen
videos to standard width displays (black bars
on top and bottom)
Pillarboxing
Pillarboxing is opposite to letterboxing i.e.
displaying non-wide screen videos on a wide
screen player window (black bars on sides)
Windowboxing
Pillarboxing and letterboxing happening
together. Windowboxing is always a bad idea
How YouTube handles video

•  Suggests 16:9 aspect for uploading videos
•  Suggest standard resolutions like 240p,
• 
• 
• 

360p, 480p, 720p, 1080p
Discourages adding pillarboxing or
letterboxing before upload; Youtube player
adds that by itself if needed
Displays 4:3 videos in 16:9 player with
pillarbox
Offers set player sizes or embeddable player
Next: Our Strategy
●  Your Player
●  Video encode handling of standard
resolutions
●  Video encode handling of non-standard
resolutions
●  Suggested zencoder settings
Our Video Player
●  Fix to a 16:9 ratio on web & player either on
Desktop, tablet and Mobile
○  Canvas App 746*420
○  Website Player 854*480
○  Newsfeed 400*225
○  User Timeline 505*284

●  Support two sizes of video (both qualities)
Suggested Zencoder Settings
●  Aspect Ratio = Preserve (always)
●  Audio and Video Quality = 3 or 4
●  Height as follow
Input

Output 1

Output 2

height > 720

Height = 720

Height = 480

height < 720 and
height > 480

height = original

Height = 480

height <= 480

height = original

height = 360

height <= 360

height = original

None
Suggested Video Handling Rules

•  Player handles pillarboxing & letterboxing
•  After output height should fit player
If it cannot fit height then scale width and letterbox
•  Provide at least 2 output formats unless
o 

• 
• 
• 

lower than or equal to 360p
Never encode into higher resolution
Never add a pillarbox/letterbox during
encoding
*Always ensure output is 30 FPS
Aspect Ratios to Pixel Size Chart
Most
Common
16:9
4:3

• 
• 

Less Common
5:4
3:2
8:5
5:3
17:9

• 
• 
• 
• 
• 
Video Handling Standard 16:9
Standard Inputs

Output

Resolution

Quality

Quality

Aspect
Ratio

Player
Pillar
Box

Player
Letter
Box

Encode Scale

1920x1080

1080p

720p &
480p

original

N

N

Down

1280x720

720p

720p &
480p

original

N

N

Same & Down

854x480

480p

480p &
360p

original

N

N

Same & Down

=< 360

360p

360p

original

N

N

Same/Up (one
quality)

* Our encoding should not pillarbox, letterbox, windowbox the videos
Video Handling Standard 4:3
Standard Inputs

Output

Resolution

Quality

Quality

Aspect
Ratio

Player
Pillar Box

Player
Letter Box

Encode Scale

1440x1080

1080p

720p &
480p

original

Y

N

Down

955x720

720p

720p &
480p

original

Y

N

Same & Down

640x480

480p

480p &
360p

original

Y

N

Same & Down

=< 360

360p

360p

original

Y

N

Same/Up (one
quality)

* Our encoding should not pillarbox, letterbox, windowbox the videos
Video Handling Non-Standard Aspect Ratio
(Midcase between 16:9 & 4:3)
Non-Standard
Inputs

Output

Width

Height

Output

Aspect
ratio

Width

Height

Player
Pillar
Box

Player
Letterb
ox

Encode
Scale

2000

1200

1

original

1200

720

Y

N

Down

2

original

800

480

Y

N

Down

- In this case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed
- The video should always fit the player in height

* Our encoding should not pillarbox, letterbox, windowbox the videos

Cropping
Video Handling Non-Standard Aspect Ratio
(2:1)
Non-Standard
Inputs

Output

Width

Height

Output

Aspect
ratio

Width

Height

Player
Pillar
Box

Player
Letterb
ox

Encode
Scale

Cropping

2400

1200

1

original

1440

720

N

Y

Down

N

2

original

960

480

N

Y

Down

N

- In this case the aspect ratio of video was greater than 16:9 (Our player) so the video is letterboxed on width.
- Letterboxing should be handled by player
- Our video should always fit the player in height

* Our encoding should not pillarbox, letterbox, windowbox the videos
Video Handling Non-Standard Aspect Ratio
Non-Standard
Inputs

Output

Width

Height

Output

Aspect
ratio

Width

Height

Player
Pillar
Box

Player
Letterb
ox

Encode
Scale

Cropping

700

500

1

original

700

500

Y

N

None

N

2

original

672

480

Y

N

Down

N

- In this case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed
- The video should always fit the player in height

* Our encoding should not pillarbox, letterbox, windowbox the videos
Video Handling Non-Standard Aspect Ratio
Non-Standard
Inputs

Output

Width

Height

Output

Aspect
ratio

Width

Height

Player
Pillar
Box

Player
Letterb
ox

Encode
Scale

Cropping

700

400

1

original

700

400

Y

N

None

N

2

original

630

360

Y

N

Down

N

1

original

720

360

N

Y

N

N

600

300

- In first case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed
- In second case the aspect ratio of video was higher than 16:9 so it should letterbox
- The video should always fit the player in height

* Our encoding should not pillarbox, letterbox, windowbox the videos
Video Handling Non-Standard Aspect Ratio
Non-Standard
Inputs

Output

Width

Height

Output

Aspect
ratio

Width

Height

Player
Pillar
Box

Player
Letterb
ox

Encode
Scale

Cropping

1200

2000

1

original

432

720

Y

N

Down

N

2

original

288

480

Y

N

Down

N

1

original

600

720

Y

N

Down

N

original

400

480

Y

N

Down

N

900

1080

- In first and second case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed
- The video should always fit the player in height

* Our encoding should not pillarbox, letterbox, windowbox the videos
Video Handling Non-Standard Aspect Ratio
Non-Standard
Inputs

Output

Width

Height

Output

Aspect
ratio

Width

Height

Player
Pillar
Box

Player
Letterb
ox

Encode
Scale

Cropping

600

720

1

original

600

720

Y

N

No

N

2

original

400

480

Y

N

Down

N

1

original

500

700

Y

N

No

N

original

340

480

Y

N

Down

N

500

700

- In first and second case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed
- The video should always fit the player in height with pillarbox (if needed). If cant then it should letterbox and
fit width

* Our encoding should not pillarbox, letterbox, windowbox the videos
Useful Resources
YouTube Uploading Guidelines
https://support.google.com/youtube/answer/1722171?hl=en

Vimeo Compression Guidelines
https://vimeo.com/help/compression

Facebook Video Guidelines
https://www.facebook.com/help/www/154271141375595

DivX Play Dimensions
http://labs.divx.com/webplayer/tips/web-video-dimensions

Más contenido relacionado

Destacado

Introducción a la Electroacustica
Introducción a la ElectroacusticaIntroducción a la Electroacustica
Introducción a la Electroacustica
Jair Guzman
 
Fyltex Months Part 2
Fyltex Months Part 2Fyltex Months Part 2
Fyltex Months Part 2
MarcelaLugo
 
二醫技三A 黃名君[1]
二醫技三A   黃名君[1]二醫技三A   黃名君[1]
二醫技三A 黃名君[1]
輝 哲
 
สรุป บทที่7
สรุป บทที่7สรุป บทที่7
สรุป บทที่7
Phuntita
 
África
ÁfricaÁfrica
África
Exocek
 
Answering questions about words – dictionaries
Answering questions about words – dictionariesAnswering questions about words – dictionaries
Answering questions about words – dictionaries
Ernani Agulto
 
Kronika Świetlicy 2011/2012 semestr 2 cz.1
Kronika Świetlicy 2011/2012 semestr 2 cz.1Kronika Świetlicy 2011/2012 semestr 2 cz.1
Kronika Świetlicy 2011/2012 semestr 2 cz.1
sp11bialystok
 
Excel ii tip_tricks
Excel ii tip_tricksExcel ii tip_tricks
Excel ii tip_tricks
Hams Ari
 
Mobile phones strictly allowed article
Mobile phones strictly allowed articleMobile phones strictly allowed article
Mobile phones strictly allowed article
Learn Politics
 
Asus september-october-2011-product-guide-and-price
Asus september-october-2011-product-guide-and-priceAsus september-october-2011-product-guide-and-price
Asus september-october-2011-product-guide-and-price
Mohd Irwan
 
Pie charts from surveys
Pie charts from surveysPie charts from surveys
Pie charts from surveys
jessiekeegan
 

Destacado (18)

Nacionalni parkovi
Nacionalni parkoviNacionalni parkovi
Nacionalni parkovi
 
Introducción a la Electroacustica
Introducción a la ElectroacusticaIntroducción a la Electroacustica
Introducción a la Electroacustica
 
Tarea 8
Tarea 8Tarea 8
Tarea 8
 
Fyltex Months Part 2
Fyltex Months Part 2Fyltex Months Part 2
Fyltex Months Part 2
 
二醫技三A 黃名君[1]
二醫技三A   黃名君[1]二醫技三A   黃名君[1]
二醫技三A 黃名君[1]
 
Plan 1qna de octubre
Plan 1qna de octubrePlan 1qna de octubre
Plan 1qna de octubre
 
สรุป บทที่7
สรุป บทที่7สรุป บทที่7
สรุป บทที่7
 
Format jawapan
Format jawapanFormat jawapan
Format jawapan
 
Disgestive system in human
Disgestive system in humanDisgestive system in human
Disgestive system in human
 
Proton+ manual ver 3 1
Proton+ manual ver 3 1Proton+ manual ver 3 1
Proton+ manual ver 3 1
 
África
ÁfricaÁfrica
África
 
Answering questions about words – dictionaries
Answering questions about words – dictionariesAnswering questions about words – dictionaries
Answering questions about words – dictionaries
 
Kronika Świetlicy 2011/2012 semestr 2 cz.1
Kronika Świetlicy 2011/2012 semestr 2 cz.1Kronika Świetlicy 2011/2012 semestr 2 cz.1
Kronika Świetlicy 2011/2012 semestr 2 cz.1
 
Excel ii tip_tricks
Excel ii tip_tricksExcel ii tip_tricks
Excel ii tip_tricks
 
Mobile phones strictly allowed article
Mobile phones strictly allowed articleMobile phones strictly allowed article
Mobile phones strictly allowed article
 
Asus september-october-2011-product-guide-and-price
Asus september-october-2011-product-guide-and-priceAsus september-october-2011-product-guide-and-price
Asus september-october-2011-product-guide-and-price
 
1
11
1
 
Pie charts from surveys
Pie charts from surveysPie charts from surveys
Pie charts from surveys
 

Similar a Video Content Handling for Rich Content Web Sites

Idents analysis 2
Idents analysis 2Idents analysis 2
Idents analysis 2
elleryanx
 
Idents Analysis
Idents Analysis Idents Analysis
Idents Analysis
elleryanx
 
Video Workshop by Frederick Rodrigues
Video Workshop by Frederick RodriguesVideo Workshop by Frederick Rodrigues
Video Workshop by Frederick Rodrigues
Dan MacKinlay
 
Video tech final
Video tech finalVideo tech final
Video tech final
Kieran Ryan
 
How to rip blu rays to ipad
How to rip blu rays  to ipadHow to rip blu rays  to ipad
How to rip blu rays to ipad
amy0327
 
Motion graphics and_compositing_video_analysis_worksheet web banners
Motion graphics and_compositing_video_analysis_worksheet web bannersMotion graphics and_compositing_video_analysis_worksheet web banners
Motion graphics and_compositing_video_analysis_worksheet web banners
unicoproductionsuk
 
Motion graphics and_compositing_video_analysis_worksheet credits
Motion graphics and_compositing_video_analysis_worksheet creditsMotion graphics and_compositing_video_analysis_worksheet credits
Motion graphics and_compositing_video_analysis_worksheet credits
unicoproductionsuk
 
2012 Summer MYT Video Editing Week 4 Exporting
2012 Summer MYT Video Editing Week 4 Exporting2012 Summer MYT Video Editing Week 4 Exporting
2012 Summer MYT Video Editing Week 4 Exporting
Richard Yen
 

Similar a Video Content Handling for Rich Content Web Sites (20)

PremierePro CS4
PremierePro CS4PremierePro CS4
PremierePro CS4
 
Channe l4 Ident
Channe l4 IdentChanne l4 Ident
Channe l4 Ident
 
Idents analysis 2
Idents analysis 2Idents analysis 2
Idents analysis 2
 
Chap14
Chap14Chap14
Chap14
 
Computer Arts Article Pg6
Computer Arts Article Pg6Computer Arts Article Pg6
Computer Arts Article Pg6
 
Idents Analysis
Idents Analysis Idents Analysis
Idents Analysis
 
Encoding Video for the Web - Webinar from ReelSEO.com
Encoding Video for the Web  - Webinar from ReelSEO.comEncoding Video for the Web  - Webinar from ReelSEO.com
Encoding Video for the Web - Webinar from ReelSEO.com
 
In-Depth: 
4K Mirrorless Cameras: Sony A7 Series, Panasonic GH4, and More
In-Depth: 
4K Mirrorless Cameras: Sony A7 Series, Panasonic GH4, and MoreIn-Depth: 
4K Mirrorless Cameras: Sony A7 Series, Panasonic GH4, and More
In-Depth: 
4K Mirrorless Cameras: Sony A7 Series, Panasonic GH4, and More
 
Producing Effective Screencasts
Producing Effective ScreencastsProducing Effective Screencasts
Producing Effective Screencasts
 
Windows/Bandicam Recording Standards
Windows/Bandicam Recording StandardsWindows/Bandicam Recording Standards
Windows/Bandicam Recording Standards
 
Sting
StingSting
Sting
 
Video Workshop by Frederick Rodrigues
Video Workshop by Frederick RodriguesVideo Workshop by Frederick Rodrigues
Video Workshop by Frederick Rodrigues
 
Video tech final
Video tech finalVideo tech final
Video tech final
 
Design in Motion: Video Production Workflow
Design in Motion: Video Production WorkflowDesign in Motion: Video Production Workflow
Design in Motion: Video Production Workflow
 
How to rip blu rays to ipad
How to rip blu rays  to ipadHow to rip blu rays  to ipad
How to rip blu rays to ipad
 
Worksheet 2
Worksheet 2Worksheet 2
Worksheet 2
 
Training Videovigilancia IP: What, Why, When and How
Training Videovigilancia IP: What, Why, When and HowTraining Videovigilancia IP: What, Why, When and How
Training Videovigilancia IP: What, Why, When and How
 
Motion graphics and_compositing_video_analysis_worksheet web banners
Motion graphics and_compositing_video_analysis_worksheet web bannersMotion graphics and_compositing_video_analysis_worksheet web banners
Motion graphics and_compositing_video_analysis_worksheet web banners
 
Motion graphics and_compositing_video_analysis_worksheet credits
Motion graphics and_compositing_video_analysis_worksheet creditsMotion graphics and_compositing_video_analysis_worksheet credits
Motion graphics and_compositing_video_analysis_worksheet credits
 
2012 Summer MYT Video Editing Week 4 Exporting
2012 Summer MYT Video Editing Week 4 Exporting2012 Summer MYT Video Editing Week 4 Exporting
2012 Summer MYT Video Editing Week 4 Exporting
 

Más de Ahsan Saleem (7)

Being financially smart employee
Being financially smart employeeBeing financially smart employee
Being financially smart employee
 
10 Rules of Work Life
10 Rules of Work Life10 Rules of Work Life
10 Rules of Work Life
 
'Saved by PowerPoint'
'Saved by PowerPoint' 'Saved by PowerPoint'
'Saved by PowerPoint'
 
Closed loop - Software Estimation to Delivery
Closed loop - Software Estimation to DeliveryClosed loop - Software Estimation to Delivery
Closed loop - Software Estimation to Delivery
 
Project Management @ Confiz - An Overview
Project Management @ Confiz - An OverviewProject Management @ Confiz - An Overview
Project Management @ Confiz - An Overview
 
How to Enchant clients?
How to Enchant clients?How to Enchant clients?
How to Enchant clients?
 
Selecting the Right Cloud Host
Selecting the Right Cloud HostSelecting the Right Cloud Host
Selecting the Right Cloud Host
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Video Content Handling for Rich Content Web Sites

  • 1. Video Content Handling Ahsan Saleem August, 2013
  • 2. Agenda 1.  Problem 2.  Key Terms 3.  Youtube Video handling/guidelines 4.  Suggested video handling guidelines a.  b.  Standard resolution and aspect ratios cases Non-standard cases 5.  Useful resources
  • 3. Problem ●  Multiple playback platforms: Web, FB, iPhone, iPad, Android devices ●  Free form video upload, any resolution or aspect ratio expected ●  Achieve consistent video experience ●  Avoid too many video outputs ●  Avoid complex calculations
  • 4. Key Terms Aspect Ratio: Width to height pixel ratio of video arranged as x:y - Note its a ratio and NOT pixel size of video. 4:3 and 16:9 are the most common ones Orientation: Portrait or Landscape depends on how video was shot (Camera Vertical or Horizontal) Video Resolution: Number of horizontal and vertical pixels. For example: 1280 x 720 (width x height). Widescreen: Any video with width:height pixel ratio greater than 1.37:1 on width side
  • 5. Key Terms Frame Rate: Frequency of images displayed called frames (frames per second). 24FPS is a progressive common format for film and 30FPS also common for digital video. Video Codec: Format video is compressed and encoded in H.264 (High Profile) is a common standard mp4 & flash. Google recently switched to VP8 / libvpx Progressive Scan (720p): Displaying or storing video in which each frame is drawn in order. Interlace Scan (720i): Displaying or storing video in which odd then even lines are drawn. Used by analog TV.
  • 6. Key Terms Audio Codec: Format that audio is encoded in along side video. Common formats are AAC (mp4, m4v) & MP3. Audio Channels: Mono (Single) Stereo (Left & Right) or 5.1 (Dolby 5 Speakers) Anamorphic Video : Video footage shot intentionally on 3:2 ratio (35MM Film) then stretched to fit widescreen 2.40:1 ratio.
  • 7. Key Terms Standard Definition (SDTV): Often 4:3 Ratio with video quality less than 720P High-Definition (HDTV): 720p, 1080i and 180p Enhanced-Definition (EDTV): 480p 4k Resolution: Future standard for HD cameras shot at 3840x2160
  • 8. Key Terms Standard Video Qualities: Standard combinations of aspect ratio and video resolution Video Quality 4:3 Aspect Ratio Resolution 16:9 Aspect Ratio Resolution 360p 480 x 360 640 x 360 480p 640 x 480 854 x 480 720p Not generally used 1280 x 720 1080p Not generally used 1920 x 1280
  • 9. Letterboxing Letterboxing is practice to fit wide-screen videos to standard width displays (black bars on top and bottom)
  • 10. Pillarboxing Pillarboxing is opposite to letterboxing i.e. displaying non-wide screen videos on a wide screen player window (black bars on sides)
  • 11. Windowboxing Pillarboxing and letterboxing happening together. Windowboxing is always a bad idea
  • 12. How YouTube handles video •  Suggests 16:9 aspect for uploading videos •  Suggest standard resolutions like 240p, •  •  •  360p, 480p, 720p, 1080p Discourages adding pillarboxing or letterboxing before upload; Youtube player adds that by itself if needed Displays 4:3 videos in 16:9 player with pillarbox Offers set player sizes or embeddable player
  • 13. Next: Our Strategy ●  Your Player ●  Video encode handling of standard resolutions ●  Video encode handling of non-standard resolutions ●  Suggested zencoder settings
  • 14. Our Video Player ●  Fix to a 16:9 ratio on web & player either on Desktop, tablet and Mobile ○  Canvas App 746*420 ○  Website Player 854*480 ○  Newsfeed 400*225 ○  User Timeline 505*284 ●  Support two sizes of video (both qualities)
  • 15. Suggested Zencoder Settings ●  Aspect Ratio = Preserve (always) ●  Audio and Video Quality = 3 or 4 ●  Height as follow Input Output 1 Output 2 height > 720 Height = 720 Height = 480 height < 720 and height > 480 height = original Height = 480 height <= 480 height = original height = 360 height <= 360 height = original None
  • 16. Suggested Video Handling Rules •  Player handles pillarboxing & letterboxing •  After output height should fit player If it cannot fit height then scale width and letterbox •  Provide at least 2 output formats unless o  •  •  •  lower than or equal to 360p Never encode into higher resolution Never add a pillarbox/letterbox during encoding *Always ensure output is 30 FPS
  • 17. Aspect Ratios to Pixel Size Chart Most Common 16:9 4:3 •  •  Less Common 5:4 3:2 8:5 5:3 17:9 •  •  •  •  • 
  • 18. Video Handling Standard 16:9 Standard Inputs Output Resolution Quality Quality Aspect Ratio Player Pillar Box Player Letter Box Encode Scale 1920x1080 1080p 720p & 480p original N N Down 1280x720 720p 720p & 480p original N N Same & Down 854x480 480p 480p & 360p original N N Same & Down =< 360 360p 360p original N N Same/Up (one quality) * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 19. Video Handling Standard 4:3 Standard Inputs Output Resolution Quality Quality Aspect Ratio Player Pillar Box Player Letter Box Encode Scale 1440x1080 1080p 720p & 480p original Y N Down 955x720 720p 720p & 480p original Y N Same & Down 640x480 480p 480p & 360p original Y N Same & Down =< 360 360p 360p original Y N Same/Up (one quality) * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 20. Video Handling Non-Standard Aspect Ratio (Midcase between 16:9 & 4:3) Non-Standard Inputs Output Width Height Output Aspect ratio Width Height Player Pillar Box Player Letterb ox Encode Scale 2000 1200 1 original 1200 720 Y N Down 2 original 800 480 Y N Down - In this case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed - The video should always fit the player in height * Our encoding should not pillarbox, letterbox, windowbox the videos Cropping
  • 21. Video Handling Non-Standard Aspect Ratio (2:1) Non-Standard Inputs Output Width Height Output Aspect ratio Width Height Player Pillar Box Player Letterb ox Encode Scale Cropping 2400 1200 1 original 1440 720 N Y Down N 2 original 960 480 N Y Down N - In this case the aspect ratio of video was greater than 16:9 (Our player) so the video is letterboxed on width. - Letterboxing should be handled by player - Our video should always fit the player in height * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 22. Video Handling Non-Standard Aspect Ratio Non-Standard Inputs Output Width Height Output Aspect ratio Width Height Player Pillar Box Player Letterb ox Encode Scale Cropping 700 500 1 original 700 500 Y N None N 2 original 672 480 Y N Down N - In this case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed - The video should always fit the player in height * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 23. Video Handling Non-Standard Aspect Ratio Non-Standard Inputs Output Width Height Output Aspect ratio Width Height Player Pillar Box Player Letterb ox Encode Scale Cropping 700 400 1 original 700 400 Y N None N 2 original 630 360 Y N Down N 1 original 720 360 N Y N N 600 300 - In first case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed - In second case the aspect ratio of video was higher than 16:9 so it should letterbox - The video should always fit the player in height * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 24. Video Handling Non-Standard Aspect Ratio Non-Standard Inputs Output Width Height Output Aspect ratio Width Height Player Pillar Box Player Letterb ox Encode Scale Cropping 1200 2000 1 original 432 720 Y N Down N 2 original 288 480 Y N Down N 1 original 600 720 Y N Down N original 400 480 Y N Down N 900 1080 - In first and second case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed - The video should always fit the player in height * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 25. Video Handling Non-Standard Aspect Ratio Non-Standard Inputs Output Width Height Output Aspect ratio Width Height Player Pillar Box Player Letterb ox Encode Scale Cropping 600 720 1 original 600 720 Y N No N 2 original 400 480 Y N Down N 1 original 500 700 Y N No N original 340 480 Y N Down N 500 700 - In first and second case the aspect ratio of video was less than 16:9 (Our player) so the video is pillarboxed - The video should always fit the player in height with pillarbox (if needed). If cant then it should letterbox and fit width * Our encoding should not pillarbox, letterbox, windowbox the videos
  • 26. Useful Resources YouTube Uploading Guidelines https://support.google.com/youtube/answer/1722171?hl=en Vimeo Compression Guidelines https://vimeo.com/help/compression Facebook Video Guidelines https://www.facebook.com/help/www/154271141375595 DivX Play Dimensions http://labs.divx.com/webplayer/tips/web-video-dimensions