video content handling for rich content web sites
DESCRIPTION
Are you planning a Website that lets user upload free form video content for playback? Yes - Then you have tons of challenges waiting for you. Video is a complex content type because of tons of parameters that associate with Video. It gets even more interesting when you have to put a playback ability in your Website. A consistent and standard video experience becomes an issue. This presentation deck is suppose to help ease your pain by going though some basics of Video content aided with strategies on how to align that with your video playerTRANSCRIPT
Video Content Handling Ahsan Saleem August, 2013
Agenda
1. Problem 2. Key Terms 3. Youtube Video handling/guidelines 4. Suggested video handling guidelines
a. Standard resolution and aspect ratios cases b. 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
o If it cannot fit height then scale width and letterbox • Provide at least 2 output formats unless
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 Letterbox
Encode Scale
Cropping
2000 1200 1 original 1200 720 Y N Down
2 original 800 480 Y N Down
* Our encoding should not pillarbox, letterbox, windowbox the videos
- 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
Video Handling Non-Standard Aspect Ratio (2:1)
Non-Standard Inputs
Output
Width Height Output Aspect ratio
Width Height Player Pillar Box
Player Letterbox
Encode Scale
Cropping
2400 1200 1 original 1440 720 N Y Down N
2 original 960 480 N Y Down N
* Our encoding should not pillarbox, letterbox, windowbox the videos
- 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
Video Handling Non-Standard Aspect Ratio Non-Standard
Inputs Output
Width Height Output Aspect ratio
Width Height Player Pillar Box
Player Letterbox
Encode Scale
Cropping
700 500 1 original 700 500 Y N None N
2 original 672 480 Y N Down N
* Our encoding should not pillarbox, letterbox, windowbox the videos
- 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
Video Handling Non-Standard Aspect Ratio Non-Standard
Inputs Output
Width Height Output Aspect ratio
Width Height Player Pillar Box
Player Letterbox
Encode Scale
Cropping
700 400 1 original 700 400 Y N None N
2 original 630 360 Y N Down N
600 300 1 original 720 360 N Y N N
* Our encoding should not pillarbox, letterbox, windowbox the videos
- 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
Video Handling Non-Standard Aspect Ratio Non-Standard
Inputs Output
Width Height Output Aspect ratio
Width Height Player Pillar Box
Player Letterbox
Encode Scale
Cropping
1200 2000 1 original 432 720 Y N Down N
2 original 288 480 Y N Down N
900 1080 1 original 600 720 Y N Down N
original 400 480 Y N Down N
* Our encoding should not pillarbox, letterbox, windowbox the videos
- 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
Video Handling Non-Standard Aspect Ratio Non-Standard
Inputs Output
Width Height Output Aspect ratio
Width Height Player Pillar Box
Player Letterbox
Encode Scale
Cropping
600 720 1 original 600 720 Y N No N
2 original 400 480 Y N Down N
500 700 1 original 500 700 Y N No N
original 340 480 Y N Down N
* Our encoding should not pillarbox, letterbox, windowbox the videos
- 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
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