[whatwg] video tag: pixel aspect ratio

Philip Jägenstedt philipj at opera.com
Mon Dec 1 13:07:01 PST 2008

On Mon, 2008-12-01 at 18:19 +0100, Lachlan Hunt wrote:
> Philip Jägenstedt wrote:
> > On Mon, 2008-12-01 at 12:39 +0000, Ian Hickson wrote:
> >> We definitely don't want to stretch the video. One of the important use 
> >> cases if having a video playback area and then playing videos with 
> >> different aspect ratios in that playback area. It should all just work.
> > 
> > I'm having a hard time seeing how this is a use case for video and not
> > for img. If one wants the intrinsic width/height to be used, then simply
> > don't set width/height. Otherwise, just setting just one of width/height
> > or using CSS max-width/max-height should do the trick.
> > 
> > This is strange:
> > 
> > <video src="circle.mpg" width="400" height="400"> <!-- circle -->
> > <video src="circle.mpg" width="400" height="300"> <!-- pillarbox -->
> This is effectively how YouTube behaves now with their recent change to 
> a widescreen player.  It would look terrible if 4:3 videos were 
> stretched to fill the 16:9 viewport, instead of just using black bars on 
> the side.  Even before when they were still using a 4:3 player, 
> widescreen videos were rendered as letterbox.

The strange part isn't that the video is pillarboxed, but that it's
impossible to not do it and that it's inconsistent with <img>.

> > <img src="circle.jpg" width="400" height="400"> <!-- circle -->
> > <img src="circle.jpg" width="400" height="300"> <!-- oval -->
> > 
> > I think it would be much more consistent if these elements behaved in
> > the same way.
> What is the use case for wanting a video to be stretched?

The use case for stretching moving images (<video>) is exactly the same
as for stretching animations (<img src=animation.gif>) or static images
(<img src=static.jpg>). While I think that fixing incorrect aspect ratio
is the most probable use, consistency and generality is the real issue
here. With an image of size 800x600 it's possible to display at any
size, even those which don't match the aspect 4:3. With moving images
(video) we can't influence it at all.

The previous solution was the pixelratio attribute, but I have 2 other
possible solutions:

<video src="4x3.mpg" width="1920" height="1080" keepaspect>

The video would be pillarboxed.

<video src="4x3.mpg" width="1920" height="1080">

The video would be stretched and have incorrect aspect, just like

<img src="4x3.jpg" width="1920" height="1080">

This way it's easy to stretch or to keep aspect, whichever you want.

Given the number of people who watch 4:3 video stretched to a 16:9
display without even noticing/caring that the aspect ratio is wrong, I
don't think we can trust that the aspect ratio of all videos is always
going to be correctly encoded and simple say that this should be fixed
by reencoding the video -- that's not even an option if the source file
is not available and reencoding is good for quality.

But to reiterate, this is mainly about generality and consistency.

Are there any other suggestions? Could this perhaps be done with CSS so
that the same thing could be done with <img>? It is in fact rather
difficult to scale something to fit inside a box using only CSS right
now. It would be rather sad to see <img> and <video> be so inconsistent

Philip Jägenstedt
Opera Software

More information about the whatwg mailing list