Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

How to keep videos from pixelating in browser


Bruce Siegel

11:41 pm on Dec 25, 2008 (gmt 0)

5+ Year Member

Hi all,

This is my first post here—sorry if it's a bit long.

How do I keep my flash videos from pixelating when viewed in a browser using the zoom feature (as in Opera, Explorer, and Firefox)?

So far, I've been embedding my videos using the Dreamweaver "insert: media: flash video" routine.

The videos look perfectly sharp when viewed in any browser at 100%. They're also acceptable when zoomed OUTSIDE the browser, in RealPlayer or Quicktime.

On other sites, I see videos that zoom without pixelation, or that don't allow zooming (the video keeps the same dimensions as other page elements expand.) I'd be happy with either solution. Any help would be greatly appreciated!



4:00 pm on Dec 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I'm not familiar with flash video but the same principals apply for any type of video. I'd venture to guess you don't have enough bitrate or the player scales video poorly.

The first thing to understand is how compressed video is created. If for example you start out with format that is only lightly compressed like DV-AVI each frame of video has an individual picture which is lightly compressed. To achieve more compression with codecs like MPEG, WMV etc. Frames are put into what is called a group of pictures (GOP). The first frame of a GOP is called the I-Frame and that is the only one that is full frame, subsequent frames are made up of previous frames. This why you'll see a lot of macroblocking during fast motion on some clips that will look normal when no one is moving. There's not enough bitrate to store all these changes from frame to frame so you get big blocks or macroblocking as it is commonly referred to.

The bitrate required for a given video so these blocks don't occur varies depending on the resolution of the video, the codec used and the content of the video. I'll use MPEG2 as example which is used for DVD. if you use a resolution of 720X480 you can set a bitrate of 8000kbps which should eliminate all but minute macroblocking, anything over 8000kbps and you're just creating a larger file. Once you get down around 4000kbps you'll start to get some real bad macroblocking and at the point you're better off using a lower resolution. You'll lose detail BUT you won't have all those blocks.

Assuming the player scales video well a 320X240 MPEG video encoded at 1000kbps will be superior to a 720X480 video encoded at 2000-3000kbps especially if there is large amount of action in the video.

So the short answer is you need more bitrate or a lower resolution but that's assuming you're encoding from a good source video to start with. You can't take a stepped on video and reencode it to higher bitrate to make it look better. A video should be encoded to compressed format from the highest quality source you have once and only once. Each recompression will degrade the video, how much "depends".

Codecs like WMV or others made for higher compression can use much lower bitrates than the examples I provided.

Bruce Siegel

4:43 am on Dec 28, 2008 (gmt 0)

5+ Year Member

Hi Coalman,

Thanks so much for the detailed response. It'll take me a while to digest it all as I'm not a web professional, but a musician and teacher creating an instructional website.

I do have a question, though. I understand that WW forbids links. But is there some way to attach a .png file? If you saw a picture of the kind of image degradation I'm talking about, it could save a lot of possible misunderstandings. For example, my primary concern has to do with text overlays, so motion is not an issue at all.

I'm considering subscribing to the site, but it would be a lot more useful to me with the ability to share images in some way.



1:14 pm on Dec 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

No images in posts that I'm aware of.

Is it like a comb effect you're seeing?

One thing I did not mention is video produced on video cams is interlaced on standard models, some will produce progressive. This looks terrible on a monitor except most players will deinterlace it on the fly.

If that's the case try deinterlacing it, any editor/encoder should have this option. One thing to note is this should only be done under these circumstances. Video that is already interlaced should be left as interlaced as it looks fine on a standard TV or software made for playing interlaced footage.

Bruce Siegel

12:40 am on Dec 29, 2008 (gmt 0)

5+ Year Member

Thanks, Coalman. I've managed to solve the problem by using a different player. It's called FlowPlayer. Are you familiar with it?

It turns out there was no problem with my video files at all. They look great on Flowplayer, even when the browser is zoomed 200% and more. Now I just have to learn the ins and outs of this player. It'll cost me $100. But it looks like they have good support, which I'll greatly appreciate!


Featured Threads

Hot Threads This Week

Hot Threads This Month