Discuss: Creating Intrinsic Ratios for Video
by Thierry Koblentz
- Editorial Comments
2 What are the chances!
Just today, I released something very pertinent to this! It’s called “Video For Everybody” and it’s a block of HTML to support HTML5 <video>, fall then back to Flash and then QuickTime/WMP for other browsers. It uses a biscuit method much like you’re doing here.
See it here: Video For Everybody
I’m wondering if I can roll your ratio work into this, to better support various Flash/QT/WMP controller sizes.
posted at 01:24 pm on May 26, 2009 by Kroc
3 The object tag is hell
Nice article. Cool way to size video and a pretty clean object tag.
But, I can’t believe the web still doesn’t have a “real” way to embed media on a webpage.
I truly hope the video tag is not another 5 years away from being useful on a public page. The single object method (one of the cleanest yet) and even Kroc’s project are still short of the mark. All methods still require that you know which plugin the browser should use which is madness. (Krocs method does not but instead requires at least 3 different versions of the same content which can be even worse)
You want to serve “.3gp” video or “.ogg” audio or even mov, flv, wmv and any number of possible formats. That is: a dynamic page where the embedded media may be ANY of these formats. Today I need to create templates for each possible format and browser. Just like the bad old times. (Since the media is user generated and not of to any one particular format)
All methods serve (at least for IE) a specific plugin. Not a file format. I have no idea which plugin is your preferred plugin to play ogg or 3gp in Firefox on Ubuntu or Opera on Windows. And frankly I’d rather not know.
Any of you very clever people know of a way to actually render a page where the browser decides the type of plugin to be used?
posted at 01:59 pm on May 26, 2009 by MartinWestin
4 Actually my method only requires two formats
@MartinWestin My format only requires an MP4 and an OGG. Firefox 3.5 plays the OGG and Safari / iPhone / Flash plays the MP4. So technically, you’re only exporting one more video file, and OGG is worth using to target Firefox users (in the future) without any need for any plugins. Other browsers may adopt OGG in the future too.
Sure the object tag is a mess, but we have to start somewhere in moving to <video> and “Video For Everybody” my first attempt at doing that.
With a FLV file, you only get Flash and nothing else. With my method and with one MP4 file you support Safari/iPhone/Flash/QuickTime and Windows Media Player embeds. I really can’t see how that’s worse off than only Flash.
posted at 02:10 pm on May 26, 2009 by Kroc
5 Amazing
This really is amazing, it’s perfect for fluid layouts that contain video… I’ve wanted to do this for ages but never worked it out, relying on JavaScript resizing instead.
Only thing I don’t like is the horizontal scrollbar, what’s that all about?
posted at 03:55 pm on May 26, 2009 by Thomas Hooper
6 Further explanation
@Kroc
Your method looks like a good one, under certain circumstances. I was not trying to pick on you but only point out that your method as well as the one in the article is still short of nirvana.
As I understand it your method uses a fixed fallback path. Video -> quicktime -> flash -> error display, or did I get that wrong?
What I have been looking for, and am baffled by not finding, is ONE tag (or composite mess for that matter) to embed “video”. I.E. a method that lets the browser decide the plugin to be used. The same tag should take a quicktime mov, a wmv video, or any other video format the world has ever known.
It must be up to the browser to decide if it has support for a certain media type, not the server script, javascript or the html tags.
The examples of formats I used are immaterial. What if I want to serve fbv files (Fabouls Basass Videoformat) or I have installed “MartinPlayer2.0”? Do you see my point?
posted at 05:12 pm on May 26, 2009 by MartinWestin
7
@brianartka
With this solution there is no need to calculate height or width, the only value needed is the ratio (set via padding).
@Kroc
That’s an interesting approach. I think you should have no problem implementing this solution with it as long as the UA can style the element you want to stretch within the box.
@Thomas
The horizontal scrollbar has nothing to do with the video, it is because of the markup that is displayed within </PRE> (it does not wrap). Use Firebug to remove this element and you should see that scrollbar disappear.
posted at 02:32 am on May 27, 2009 by Thierry Koblentz
9
I posted a very similar technique around 3 years ago on css-d (css-d archive — the link to my site is dead now, but you get the gist). Whether you found that and adapted it or came up with this independently (where the latter is far more likely), good to know it wasn’t just my crazy idea!
posted at 07:09 pm on June 3, 2009 by Leszek
10
@Leszek:
Hi,
Actually, after I wrote this article (but before it was published on ALA), Ingo Chao sent me a link to the thread you mention.
I asked the editor to somehow plug that link in the article, but that didn’t happen.
On the other hand, our techniques are very different (even if both use padding) as I am relying on the width of the parent of the outer div – which allows me to use a “constant” – while you calculate the padding of the element based on its own width.
In my opinion, that approach cannot really work as you need to keep width and padding “in sync”.
posted at 01:44 am on June 4, 2009 by Thierry Koblentz
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 Great article, I made a similar simple 16:9 calcul
I like the scaling aspect of this, that will come in handy. I made a simple jQuery based 16:9 calculator based on the width of a content section:
http://www.brianartka.com/jqueryVideoBox.html
Its simple, but solved my issues. I did some research and there is no set “standard” to what the width of a 16:9 video should be on the net, its all over the board. The key is keeping the aspect ratio, as Thierry mentions in the article. Maybe this little tool will be helpful for others.
Thanks!
posted at 01:11 pm on May 26, 2009 by brianartka