Web delivery- HDV to flash...never having done this 'properly' before.
 

Apologies over the dodgy title:

I've just had a call from a guy I'm doing a bit of work with. He, for the main, works in web/design/flash animation. I've provided a video for him recorded in HDV (JVC HD100), edited in FCP/Motion then exported via compressor as a H.264 LAN file (the QT 7 download preset).
The results are pretty good - the physical size is just right (640x360- 16:9 by the way) and the file size is small, considering the quality, at just under 9mb.
This has now been embedded into a website via (and I've only just heard this phrase on here and via the web guy): progressive download. Unfortunately the results are not particularly pleasing to the eye. I 'presumed' (I really don't dabble into the underworld that is back end web) that the quality would be exactly as it was on the completed QT mov file...but it clearly isn't. Whilst better than youtube, it still looks pretty compressed and pixilated (maybe not helped by the fact that this is a Kung Fu promo and as such there is lots of fast movements).

I'm at a loss what to do next - send over a larger QT file (not using the H.264 codec)?
I've had a browse through this part of the forum (a quick browse...time is against me as the site needs to be 'live' very soon) and spotted a referral to Wowza - there's few pennies in the pot at the moment however so I might have to work with what I have.

Any suggestions will be gratefully received.

Many thanks,
Dave.

David, anything in this thread that helps you? Good luck!

http://www.dvinfo.net/conf/dvd-web-v...am-please.html

David, Please provide a link so we can see.

Most of the time I have had this issue is because they are using a different resolution on the player than the video that was embedded which can cause some quality loss. You should be able to get the same quality that the file has for the most part. Please be aware of any post processing QT may be doing to the file as it plays it back though. I have not worked directly with QT in a while as I use VLC but I have seen where some players will add post processing to sweeten the image.

David... You don't indicate how long your video is so it's hard to determine how compressed it is. Based upon what you are seeing in the compressed clip (artifacts, low quality) you may have compressed it too much and squeezed all the detail out of it. 9MB is pretty small for a clip of any length.

You might want to compress it again but this time raise the quality and data rate settings and see if it improves the situation. I cannot give you specific suggestions as I do not use FCP.

Thanks All - cheers Andy - I'll take a look at that link.

Josh - I'll see if I can provide the link...it's not live at the moment - I'm seeing a 'back door' version of the site. As far as I know, the web guy is using the same version of QT as I (and we're both on macs by the way). Looking at the file in a standalone QT player, it's just about right - sharp (colours have diluted a little which seems to occur with the h.264 codec for some reason). When the same file is being played back via the flash page however it's, for want of a better phrase, a shadow of it's former self.

David - it's a really short 45 sec piece. I'll try and play with the h.264 settings (I'm using compressor for web output settings - best for 'LAN'). If it were playing on the site as it stood then we'd be more than happy...but it's degraded somewhat (and it's not a 'too close to call' judgement - it's quite obvious the crispness has been stolen somehow?!?).

I'll look at the settings within compressor for the H.264 output, but perhaps try a larger QT file, either via compressor or directly exported from FCP.

Thanks for your replies.

Checking my output to compressor from FCP it was set at medium quality - I've changed this to best now and it's currently being processed.
I was told that I couldn't make the physical size any bigger (currently at 640x360) as Flash won't 'shrink' this too fit but will show the video at the original size (which is the size it needs to be).
I haven't as yet tried the Mpeg codecs but will do.
The link Andy provided has some advice on there (the bitrate calculator is a handy tool) and perhaps it might be worth investigating a different player to show ('progressively download'?) the clip?

I'll persevere till it looks good...we have a few more projects coming up that will absolutely require good looking clips.

Cheers all.

The video size sounds like it should be fairly high for 45 second video @ 9MB That is a very high bit rate I would actually think you could lower it a bit and still keep the quality.Either way, the guy for the website should not need to reencode the video to play in flash so if the file looks good when you play it via QT but bad when it comes through the flash. Can you provide the file outside of the site? We could look at it to make sure everything is as it should be with the file.

I could try and add the original QT file here...give me a moment to try that - hopefully I can add the link to site too - and you'll notice the drop in quality instantly.

I've compressed a couple more attempts, with different bit rates and quality (using Quicktime) set to Best rather than Medium. That file is 22mb. Currently compressing a straight QT conversion at the moment...and as I type that, it's complete...at 191mb...ahem, slightly larger than expected!

Here's the 9mb (8.8) file:

The quicktime video looks pretty damn good for the size. It would be interesting to see the page that you embed the video in to see how the quality changed, if you could get us a link that would be great.

(note: usually when embedding an h.264 video into flash the video is saved in a mp4 wrapper not mov)

Yes - I've been pleased with the H.264 (web download 7 for LAN setting in compressor).
Might the Mp4 wrapper effect this (I know little about embedding video into flash I'm afraid - apparently the video is 'linked to' rather than 'a part of' the flash site...?)

Here we go...try this link and let me know, if possible, where it might be going wrong:

index

I see what you did! You went into flash and create a swf project and embedded your video into that and then exported that project and embedded the index.swf file onto your page.

This is not the best way to embed a video into flash. What you usually do is get a flash player such as the open source JW FLV Media Player (JW FLV Media Player). You embed that player.swf file onto your page and link the "src" parameter to your video file.

Here is an article I wrote about using the JW Flash Wizard to help you embed your videos in flash JW Flash Player Wizard | Vidlivery

What the web guy did you meant!! I've never 'undone' the boot of a webpage and looked at all the wires and electronics...I've so far managed to leave that for other people :)

Cheers Wes - I'll pass your info on and hopefully get this sorted...be good if it works as we want it.

Many thanks.

the wrapper should not change anything in terms of it looking better or worse. The only thing the file should have done to it is the ATOM moved to the front of the file so people can do progressive downloading. Most video compression tools offer an option to enable to do this which ussually is named something along the lines of http streaming.

Simple Flash Video Player

The above link is your video in the JW FLV player you have to wait a moment for the file to download before it plays but once it does it should be fine. The quality looked really good overall for the ammount of motion and such.

Josh - that looks much better. I'm not sure how I would translate this to web guy, or what he would need to do to make it much better. Might it be because we are linking to the original file rather than embedding it within the website itself (and I'm quite possibly talking bo**cks here so apologies in advance).
The only other options were to try different file exports from the FCP timeline - MPeg4 or AVI format perhaps??

Suffice it to say, we could do with it looking just like the link you posted Josh.
Many thanks...this has been an enlightening afternoon!

I basically embed the video you posted here which is what you should be doing. I did not actually modify the file or anything. When I suggested modifying the file that was to enhance playback speed for the viewers. I use the JW FLV player that is linked above. Tell your web guy to try and use that.

Try this one: Final Kung Fu S.T.P Encoded

I rencoded the file a bit but to the same resolution which is actually 640*480 which is 4:3 new file size is about 5.6MB. Most of your video is indeed wide screen but when you do the zoom effect on the punch you do utilize the 4:3

The file is optimized for progressive download with the ATOM at the front of the file. If you like it, feel free to use it on your site.

Direct file link is: http://www.simplethoughtproductions....NFILE-h264.mp4 (right click save as)

The link you posted before this one Josh looked lovely, although there was a moments wait for it to download. These latest clips do not seem to be working as well. The speed of the video and audio is a little erratic for some reason and the 4:3 format doesn't work so well. It's a little confusing but the footage was shot 16:9 but 2.35:1 bars were added as an effect.
I've just read that Adobe is not currently geared up for H.264 which might explain why the 'instant' download (Atom/Progressive download) isn't working so well. Personally I'd rather keep the quality (as per the original link you posted) and have a short wait.

Thanks Josh.

Moving the Atom actually wont effect quality. The quality change was because ran the video through my own quick encoder which uses a bitrate of about 800K which is much lower than what you were using. You can move it on the version you like and not have to wait. I have a feeling part of the wait you experienced might have had something to do with the fact my server is in Texas and you are over the pond. The file I downloaded that you posted here was reported as 640*480 by VLC which is a 4:3 resolution.

Either way the original file you posted loked very nice so you should have a good starting point with your webmaster now :)

My web guy sent me this link:

Adobe - Developer Center : Exploring Flash Player support for high-definition H.264 video and AAC audio

which has this titbit of info (I'll admit it means little to me):

which may or may not explain why we were getting such bad quality from my original file H.264 file. I'm at a loss to explain how we're still having problems though if you've posted a really good quality clip from my file. I'm going to drop a couple of MP4 & QT exports from FCP onto our own server today and see if that makes any difference...but I'm best sitting down and going through this is in person...because I'm totally baffled now.
Huge thanks for your help Josh.

Well I am flying in to Manchester on the 20th of December :-D I have low consultation fees ;) The Atom will not effect quality. I am fairly sure it was just the method of displaying the file that caused the lower quality. It will only determine if your video starts playing in a few seconds vs. a minute or two.

Do you accept 'beer tokens'? :) Do you have friends/family over here?!

Thanks Josh - I'll be seeing the guy in a day or two so we'll sit through the options and I'll show him your file etc.
Cheers.

Oh yeah do I ever! My better half is from the UK so we are visiting the UK and then to Germany. I grew up with good Beer and man do I miss it.

Ah I see. You might just catch the end of the European Christmas markets (the largest in Europe) - plenty of fine ale in this city :)

I've been asked to provide other versions of this file - straight QT exports and not H.264 (due to that Adobe developer link I posted). The closest I can get to that 8.8mb H.264 file is nearly 60mb (and it's not quite as sharp - other file sizes have reached 160mb). I cannot think of any other web codec using FCP/compressor. We simply have to get the original file to work. I'll see him tomorrow so hopefully work this out!!

Cheers.

Not sure why they do not want the h.264. If you want the most people to see it the answer is Flash which means you are either using .flv file or you are using h264 Apple has moved to using h264 for all of their web videos.

I'm not sure Josh - I'll speak about it tomorrow hopefully - it's not my area so I can't explain why this isn't working (might a possible explanation be that the Adobe CS or Flash Player software are old versions?) .
The problem was when my H.264 file degraded on the website viewing (which you saw and offered a really good quality version via web - so there is a way!...it's working out how we can do it this end - I'll have more info in the next couple of days).
Should I, in the meantime, try and export the file as a .FLV? I've tried a few more versions (MP4, although isn't H.264 a version of MP4?) to export but none come close to the quality (and small file size) as the H.254 codec (for the record I'd exported as QT 7 LAN for downloading).
Interesting insight to this link in the video content chain this weekend - I've learned a little bit more.
Thanks Josh.

.mp4 is a container for the video and audio streams.

h264 is a codec that encodes the Video stream inside of the container.

Confusing I know.

in the .mp4 there are a few codecs one of which is h264

A cool thing the advanced flash players you can use on your site (JW FLV and FLowplayer) is that you can have them check if the users have the right version to play the high quality .mp4 if not, it will fall back to a .flv you provide.

When trying to get to the most viewers you do want to provide as many options as possible. If this is my goal I usually provide a WMV file for the windows people, a .mp4 for the mac people and a .flv for everyone in between.

On my own website where I get to say what goes and not a client I use h264 files and ask the user to upgrade to version 9.0.15 or higher but that is me.

So try the flv. If you can use the on2VP6 encoder that is the best, if not the sorenson spark does fine but it will require a higher bitrate than the h264 file to keep the same quality.

Hi Josh - I believe the on2VP6 encoder is indeed being used. If I can figure it out I will also create a .flv file directly from FCP/Compressor (although h.264 appears to be the only web option, unless I use MP4 and up the bit rate somewhat).
I guess we may have to wait for Adobe Flash Player to fully incorporate h.264 material...we'll persevere!
Thanks josh.

Well. I am still kind of confused.

h.264 codec is fully supported as long as you follow their guidlines. The .mp4 container is an acceptable container to hold the h.264 video for flash. Your file you posted does follow guidelines close enough that it can be used. I think what may have made it look bad was the way it was put into the website and the player the website used. Keep in mind that every flash "player" is programmed differently. They all utilize the same programming language but they are not all created equal. One possible option is that the embed code used did not use the proper resolution which caused the player to try and scall your video. If it was not set to properly scale the video the result could be video that looks terrible.

Dont give up, we will figure this out!

Indeed we shall Josh! Funny thing is, many reels I see on websites all have a fair amount of degradation/pixillation (although not quite youtube quality) but as has been proven with my file via your site, it can look splendid, even at such low file sizes (8mb).
We have to put up another reel at the end of the week, so we'd like to try and figure this out by then (this will be a larger file as it clocks in at over 3 mins).
Really appreciate your help Josh.

Take a look at the FlixPro encoder
 

Go to On2 Technologies - Making Video Possible, from Handhelds to HD and look at the FlixPro encoder. I've been happily using it for 18 months to encode .AVI to .flv and .swf. An SWF file can have a player built into it. I'm sure you must also be able to encode .mov as well (I'm just not at my regular office now) An FLV file needs a player on the site from which it is playing. I've got a bunch of videos playing from my site. Many of them 'progressively download' to other sites from my server. I can encode as high as 1K ( I can go higher, but increased file size doesn't really pay off).

You can check out my site if you want at Cutlass Film Video Production - Vancouver Island - Home to take a look at some. I've got both FLV and SWF playing on my home page. The page and built in flash player are both black, so on the flv files you have to click the play icon.

Just don't burn up to much of my bandwidth.

Good Luck

Thanks Ken - I'll check out your links. I'm pretty sure on2 is being used so .mov's should be ok. It doesn't help that the vids we're posting up have a heck of a lot movement in them (being martial arts footage) - talking heads wouldn't be so bad!

Cheers.

David,

My experience is that the encoders will handle motion within the frame far better than camera motion, but that being said, the quick movement of martial arts will 'stress the codec'.

Codecs like H.264 and On2 have motion estimation code that tries to recognize either subject motion or camera motion and save bandwidth by finding similar blocks of various shapes and storing them as the same image. This is all part of the black magic of writing a codec.

For example, with the x264 codec, you have a lot more control over the encoding parameters than most other H.264 codecs, like tweaking the way motion is detected, or subpixel motion estimation.

To really understand these settings, it's necessary to do short experiments of various types of content and visually compare the differences between the encoded movies. Because of the exhaustive nature of this process, I wrote a software environment called SampleLab that makes this kind of experimentation simple and efficient.

But, to oversimplify things a bit for practicality, you could say the more pixels change from frame to frame, the higher bandwidth you'll need to preserve the same quality.

For a detailed description of the tradeoffs between codec, bitrate, frame size, and content motion when encoding web video, I would recommend studying pages 16-22 of the DV Kitchen manual. You can get this PDF manual for free by downloading the free DV Kitchen trial. (OS X only at this time, sorry)