A penny for thoughts?

About the correct valuation

Archive for July, 2007

Making wmv files with ffmpeg

leave a comment

Good luck.

After some pretty extensive playing around with ffmpeg I’ve reached 2 conclusions.

First, ffmpeg’s wmv support is shaky at best. You *can* get it to make good wmv files, but it’s hard. The only way I managed to make undamaged wmv files is from an uncompressed raw source. Which, for a full video, means the source file was over 50GB. Ouch. Any compression at all in the source, be it mpeg4, mpeg1, even wmv! meant that the output file would have problems.

Another problem I ran into was that making clips from a video is hit and miss. I needed to take a full video and make 1 min clips of the whole thing. With a compressed source the audio would sometimes end up out of sync with the video. I’m not sure but I’m reasonably certain that it was because if you tell ffmpeg you want -t 60 -ss 60 (60 seconds starting 60 seconds into the source), the audio starts exactly at 60 but the video starts at the closest (or next, not sure) keyframe. The solution for this is the same as for the wmv, you need to start with an uncompressed raw file.

The problem with the uncompressed raw file (other than space which wasn’t really a problem since I had a couple of TB available) is that you run into a Shlemiel the painter’s algorithm problem. It’s super quick (well as quick as video conversion can be since I was running my jobs threaded on a dual dual core server) to make the first few clips but as you get further and further into the video, each time it starts from the beginning and seeks to where you want to be. And in an uncompressed video it takes a long time to seek. My program became hopelessly IO bound so the threading wasn’t helping that much anymore and it would take 7 hours to make all the conversions and clips I needed to.

So we gave up on ffmpeg. Sort of. Instead I use a combination of windows tools and we’re going to buy a windows server. I start with an mpeg source that I cut up with mpgtx, then I convert all those to wmv with Windows Media Encoder 9 and finally convert them all to flv and mp4 with ffmpeg. All this takes about 2 1/2 hours to run on my desktop and the vast majority of the time being spent doing the wmv conversion. The only reason we have to buy a windows server is because of wmv. Boo.

If anyone has had success converting to wmv with ffmpeg I’d really like to hear it.

Note: I tried mencoder as well but it has an entirely different set of problems with wmv (which is bizarre considering they’re supposedly from the same code base!).

Written by Smokinn

July 8th, 2007 at 12:15 pm

Posted in Uncategorized

prettier css gradients in any color

one comment

aka css gradients version 2.

The other post was ok but the poll bars didn’t really look like much. They were a very simple gradient that kind of worked and looked decent but looked kind of lazy. It’s easy to apply the same trick to get a better result though. This, for example, is much nicer:

This is a question?
The first option
The second option
The third option

And it really isn’t all that harder. The gradient I used is this one:

It goes (top to bottom) from transparent to white and back to transparent. To make this is really simple. Make a 4 pixel tall image and make a gradient from transparent to white. Make a new 8 pixel tall image with a transparent background. Copy and paste your 4 pixel image twice on the 8 pixel one, rotating one of the pastes so that the white ends touch each other.

Then you just apply a little css like so:

.poll_answer_bar {
	background-color:	#0099FF;
	border:				1px solid #0099FF;
	height:				10px;
}

.poll_answer_bar img {
	height:				10px;
}

And voila. Pretty almost-css-only poll bars. Changing 0099FF (blue) to FF0033 (red) will get you:

This is a question?
The first option
The second option
The third option

Not bad at all.

Written by Smokinn

July 5th, 2007 at 11:42 pm

Posted in Uncategorized

css gradients in any color

2 comments

Ok, I looked around (granted not for more than half a page of google results) and it seems that people have the weirdest, most convoluted and dumb ways of making css gradients. I think the worst I saw was this one that colours 255 separate divs. Yuck.

In the sites we’re building we have a certain number of plugins that just display themselves based on templates. These templates are just the very minimum of html source required and the vast majority of the layout is css, CSS Zen Garden style.

Anyway, here’s a simple way of making a gradient that’ll just show as any colour based on your css style sheet.

First, make a 1 or 2 pixel high and 10 or 20 or so pixel wide (depending on how detailed and smooth you want your gradient to be). If you’re too lazy to be bothered you can just use this one (very small on the left of the line just under this one):
white to transparent gradient overlay

Then you just make a div with the appropriate width and style both the div and the image whatever size you want. I was making polls so I’d do something like poll_width * number_of_votes / total_votes

So if you had a poll width of 200 and 3 options, the first one getting 10%, the second getting 30% and the third getting 60%, you’d end up outputting html like:

This is a question?
The first option
The second option
The third option

and your css file would partially resemble this:

.poll_answer_bar {
	background-color:	#0099FF;
	height:				10px;
}

.poll_answer_bar img {
	height:				10px;
}

To change the colour of your gradient, just change the background-color in the css file and you’re done.

It’ll look something like:

This is a question?
The first option
The second option
The third option

With say #00FF66 (green) instead of #0099FF (blue) we get:

This is a question?
The first option
The second option
The third option

Not bad for pretty much no work. =)

The only browser this doesn’t work in is IE6 since IE didn’t handle PNG transparency properly before IE7 (though you could use a gif instead of a png if you prefer). To get it to work you need a little javascript hack that you can read about and get here or you can just google png transparency fix.

(Please forgive the title.. the american spelling of colour as color bugs me too but I figured it would help people googling even though I doubt I’ll ever be on even the first 10 pages of a search for css gradients.)

Update: See this post for a prettier version based on the same idea.

Written by Smokinn

July 4th, 2007 at 8:05 pm

Posted in Uncategorized