Embedding Flash video...

[tomkirk23]

Hi -

I am relatively new to web development and have a couple questions regarding embedding Flash video. I have a customer who wants a short 30 second video to loop on the front page of the site. During the playing of the video, the end-user should have the ability to click on a website menu item and start to traverse the site.

I have taken a sample AVI file and successfully converted it to both FLV and SWF. I have uploaded these files to an existing Google Pages account that I maintain. I have successfully used html object and embed statements to autoplay and loop the video (the SWF - can't get the FLV to work). But I do have a couple questions:

1) Should I use SWF or FLV and why? It seems like I can successully play the SWF using object and embed, without the need for any special software. Should I instead be using the FLV for some reason? Would I need any special software to support this?

2) What user compatibility concerns (if any) should I be concerned about? If they have Flash installed, will this work pretty consistently (I do understand formatting inconsistencies between IE, FF, etc.... just not sure if Flash video is an additional can of worms to be concerned about)

3) I expect this to be relatively low volume (not sure exactly what that means yet, but this is for a small local landscaping business). Should I host the SWF/FLV video on Google Pages (is that OK?) or should I be looking at somewhere else? I have reason to store it on an external site.

4) Google Pages has a 10mb limit. Suggestions as to what host I should use if I need to go beyond 10mb.

5) I am assuming at this point that displaying a 30second HD-resolution video would NOT work for many end users. I am thinking we should stick with non-HD until the hardware/bandwidth catches up for most end-users. Is this the correct thinking?

6) The video would be recorded with sound. but I would want the video to be muted, unless the end-user clicked on a "Turn Sound On" button. How would I implement this?

7) I found a free AVI to SWF/FLV converter. Is there a noticeable quality difference between AVI->SWF/FLV converters?

I would appreciate any help you could provide...

Thanks,

Tom K.

[Eye for Video]

1) Should I use SWF....
Typically, a .swf is used for an animation sequence or as a holder for a video player, etc. but is not used to hold an actual video. The reason for this is that putting a video into the main timeline of the .swf will result in a very large file, since the video requires a bitmap in each frame of the timeline. The .swf must load completely as the page is being parsed, hence a smaller file will load the html page quicker than a large one.
Using a .swf which holds a (.flv) video player allows the video file to be loaded after the rest of the page loads. Auto play will start a simultaneous progressive download of the .flv but is still faster than waiting for the entire video (as a .swf) to download.
Either way, you will need a .swf file, either to just hold a video player or a .swf which already has the video built into it’s timeline. A VIDEO PLAYER .swf could be as small as 50KB, the .FLV VIDEO FILE on the other hand will likely be several MB.
Since you have the video both as a .swf and a .flv, compare the file size. Web pages pushing 1MB or so can take a little time to download…. compare the download burden of your two versions.

end-user should have the ability to click on a website menu item and start to traverse the site.

Are you saying that this should be a function of the .swf? Do you have another navigation bar/menu or is all the navigation to be built into the .swf?
A .swf can easily be made to handle the Web site navigation but a .flv does not have that ability.

2) What user compatibility...
Shouldn’t be too many compatibility issues. I suggest using “swfobject” to place the <object> on the page, just in case the viewer doesn’t have Flash installed. It also allows you to create some alternate text content which could describe the video and which would be readable by spiders and robots to index stuff about the video.
http://www.adobe.com/devnet/flash/articles/swfobject.html

3) and 4)I expect this to...
I’ll lump #3 and #4 together. By 10MB do you mean file storage or monthly bandwidth (“relatively low volume”)? If either one of those issues puts you over a limit, you will need to look for a different hosting solution. I can understand wanting to use a free service but the limitations are sometimes not worth the hastle. Use a real Web hosting company where storage and bandwidth allotments are HUGE!
www.lunarpages.com

5) I am assuming at this...
There would be very little advantage to using HD video for this type of presentation. The bitrate used to create the video will largely determine the quality the viewer will see on their end, regardless whether it starts out as HD or standard video. The constraining element in the whole equation will be the Internet connection speed on the viewers end. This can run from 56kbps to 6Mb per second or more. Not sure what your video dimension are but here is a little info I posted earlier.
Have you considered the bitrate issues of using different dimension videos? While a 300kbps (this is faster than a 256kbps DSL line) bitrate may be satisfactory for a 320 X 240 video, your viewers will need a pretty fast connection to view a 640 X 480 video. As a comparison, using 320 X 240 at 300 kbps as a standard, a 480 X 360 would need a bitrate of 2.25 times that (675kbps) to maintain the same quality. The 640 X 480 video would need a whopping 4 time the standard, or a bitrate of 1200kbps to deliver the same quality.
The quality of HD video or standard video all comes down to the bitrate used to deliver it. Besides the video stream, you also have to throw in the audio, which can add another 50-250kbps to the download burden.

6) The video would...
Use a .swf video player which has a volume slider or a mute button.

7) I found a free AVI to SWF/FLV...
I believe that yes there is. I would recommend using the Flash 8 Video Encoder. But the other component in the conversion process is the various settings you choose as you transcode from one format to another. Most basic is the video bitrate. This is the number one element in determining the quality of the end video. The audio bitrate also plays a role in determining the final file size. 256kbps stereo is overkill for a video unless the audio tack is very, very important.
Sounds like an interesting project, best of luck to you,
Eye for Video
www.cidigitalmedia.com

[tomkirk23]

Eye For Video -

I appreciate your detailed reply.... I do have a couple follow-up questions/comments....

1) Both the SWF and and FLV are about 10MB in size. It sounds like I should go with the SWF. When using Object/Embed on a test page (with the SWF on Google Pages) the video seems to start just about immediately - there is no pause for buffering. However, it does seem to consistently "burp" very briefly at the beginning - not sure what could be causing this. I was hoping for more of a smooth start to the video.

2) No, I am not doing navigation via Flash. End-user would click on a HTML/CSS-driven menu-item to leave the front page. I just want the video to play and loop. If I want pause/mute controls on the video, are these driven/created by parameters on the object or embed statements?

3) Yes, thank you for the reference to swfobject. I will use that.

4) Yes, the SWF is 10MB in size. I have no idea about bandwidth, but I would guess it is extremely minimal. I suspect the current website (that I am replacing) get 5-20 users accessing it in a given day. My feeling is to go with Googlepages to start and move to paid hosting if he has an increase in web traffic.

4a) This is my real concern.... As I mentioned, my customer wants a large video (let's say 640x480 or more on the front screen of his site. The video will be about 30seconds in length - the SWF will be approx 10MB in size (I can talk him out of HD-resolution for a few years). The video will loop until the end-user selects an HTML-CSS-driven menu choice to navigate elsewhere.

My real concern: If I implement this (as you mentioned with swfobject), will this run at reasonable speed/efficiency on an average user's PC.... or do I need to push back on the customer to lower to his expectations regarding having a large moving video on his front screen? Generally, is having such a large video on the front screen a good idea - or is it beyond the average user's PC (or home bandwidth). Your quote: "The 640 X 480 video would need a whopping 4 time the standard, or a bitrate of 1200kbps to deliver the same quality." I think you are saying that 640x480 video is beyond what someone you plan for a site to be viewed by average people in their homes. Correct?

Alternatively, I would suggest a large photo slideshow (which I have implemented several times) instead of the large video.

5) Yes, I would love to use the Adobe toolset. However, I do this entirely as a sideline (and am learning along the way). I have been a programmer for years, but have recently been teaching myself web development. I am starting to get some paying clients to supplement my income.... but for now, I use free or inexpensive tools when I can find them. For the moment, I focus on development within the SmugMug.com environment, which provides a wonderful photo-sharing engine with the ability to do html/css/js customization. I'll be able to afford the Adobe tools at some point.

Your help has been great and is much appreciated...

Tom K.

[Eye for Video]

1) Both the SWF...
Yes, get a .swf that contains a .flv player (and one with a mute button) or create your own! Burps are because video is unable to download as fast as it’s being played. With a very small buffer time, the video will start fast but the buffer is being emptied out faster than it is being refilled (bitrate too high).

2) No, I am not doing navigation via Flash...
Maybe they can be but are usually a part of the .swf player.

4) Yes, the SWF is 10MB in size...
Well if the .flv video is just under 10MB and your limit is 10MB, then you’ve got a little room. If you are over limit, redo the video at a lower bitrate, 300-400kbps. Doing so will also help the “burping” problems. Bandwidth (how much is being send out) is different from the storage space at Web hosts, check your limits on both.

4a) This is my real concern...
As a point of reference, a good quality 320 X 240 video at a bitrate of 350kbps, will produce a file size of about 4-5MB per minute of video. So your size of 10MB for 30 seconds equals the quality I am describing (10MB would = 4, 30 second segments @ 5MB/sec).

My real concern...
“run at reasonable speed/efficiency on an average user's PC” is directly proportional to the speed of the viewers Internet connection. These connection speeds are moving up, but still, not everyone has even a 1.5Mb connection. So for example, video stream at 1200kbps, audio at 256kbps, other Internet overhead (30% or more) 450kbps = 1906kbps, well over the capacity of a 1.5Mb line (this is the speed of a T-1 line). Maintain quality by reducing the dimension of the video.

5) Yes, I would love to use the Adobe toolset.
I can certainly relate. Seems I’m constantly chasing either new software or a new computer that can handle the new software.

Best wishes,
Eye for Video
www.cidigitalmedia.com

[tomkirk23]

I 4 Video -

Yes, I have more follow-up....Thanks for your patience...

1) I am using a AVI to SWF converter. I understand how to lower the bitrate - makes sense, no problem. However, I don't see myself diving deep into SWF creation on this project. So...(very basic question)... where does the player with the mute/pause/etc buttons come from and how do I turn it on? Is it as simple as specifying params on the object/embed....or is there more to it?

2) I got the swf down from 10MB to 3.5MB using a different converter. Until I can justify/afford the correct toolset, I am using free software (named SUPER).

3) Thank you re "My real concern". I will lower the size of the video to 320x240 or so.

Thanks,

Tom K.

[Eye for Video]

Whatever <object> it is that you are embedding in the page is most likely a .swf file. The file that you place on the html page is the player, inside it is the actionscript to play the animation, and it could also have controls to mute, etc. Problem is, you can't edit a .swf, only the Flash .fla file from which it was created. The mute buttons will be apart of that creation. Not sure if you can control it after creation, perhaps...???
Converting a video from one format into a .swf will result in a file that can be placed as an <object> but it can't really be edited. Check into the convertions oftware to see if there are are options such as controls, mute, etc. along with the skins that may be available.
EfV

[nina7683]

if u want to know swf and flv which is the better?first u may know What’s the Different between SWF and FLV.

i found a guide can tell u.

the Different between SWF and FLV (http://www.video-to-flash.com/flash_video/)

u oso can try Flash Video MX Pro (http://www.video-to-flash.com/),it can converts AVI to SWF/FLV, DVD to SWF/FLV, MOV to SWF/FLV, WMV to SWF/FLV, MP4 to SWF/FLV, 3GP to SWF/FLV, MPEG to SWF/FLV, etc.

if need u can google it.

[tomkirk23]

Nina -

You are known as Joy on Yahoo Answers (where I have reported you). Thank you for your insistent advertising for Moyea.

You are much more obvious than you think.

I would ask my fellow web developers to think twice before ordering Moyea products.

You are ruining very helpful forums with a bunch of trash advertising.

Now nicely leave...

Tom K.

[Eye for Video]

Thanks Tom, for your comments!
I agree completely with you. I have gotten some very good and helpful info here and try to pass it on.
It's very discouraging to work hard to try help and have to battle blatant advertising masquerading as forum discussion.
EfV

[tomkirk23]

Eye for -

I have been experimenting with the trial version of Flash CS3. I may be able to do what I need (which is pretty limited) with the trial version only.

(1) I have noticed that I cannot seem to correctly import AVI's which are DIVX-compressed. Uncompressed video seems to import no problem. Is this normal?

(2) Also, it appears that the object/embed statement for a progressive download is very much similar to the object/embed statement for a "regular" flash file. Is this correct? Is all of the difference really in the operation of the SWF file itself and how it reads the FLV file?

Thanks,

Tom K.

[Eye for Video]

For (1) are you talking about importing an avi into the Flash Encoder to transcode or are you talking about importing the video into the .fla and placing it on the main timeline? Are you using a video player component to play the .flv? Normally you would not want to place a video file of any type inside the .swf but would you would create a . swf which would call for and play the .flv (like using a video component). DIVX is a proprietary format that gives great quality but just doesn’t work unless you have a player capable of playing it. So are you transcoding from DIVX into .flv and then calling that file with the .swf or are you trying to place a DIVX file into the timeline?
What uncompressed format are you referring to?
For (2) yes the html code is the same.
A bare bones .swf with just a video player component on the stage would be less than 50kb. The a separate .flv file would make up the rest of a 3500kb file, for example (or 3450kb). As the html page loads, it loads the .swf really fast, because it’s only 50kb. Then when the viewer click play on the video player, the .flv is progressively downloaded from the host.
If the video is placed in the timeline, as the html page is downloaded, it has to download all 3500kb before the page is complete. Some of that may be progressively downloaded into the buffer but because it has to share bandwidth with other elements of the html page downloading at the same time, the page is slow to completely download.
Sorry for bouncing around on this explanation but I’m not really sure what you are using for a player and how you are converting from DIVX to flv.
EfV

[tomkirk23]

EfV -

To answer your question....

I downloaded Adobe Flash CS3 Professional (trial version). I then initiated a new project (.fla). Within that project, I entered File, Import, Import Video... to pull in the AVI.

I then followed the wizard-like process to select progressive download, video/audio settings, player/controls, etc. This created a smaller SWF and a larger FLV. I am now uploading both of these to my server space. Will be testing it tonight.

Just for fun on this first test, I chose a 6-minute AVI, 720x480. I also chose "high" quality under Flash 8. Not sure whether this is really too large a file to deliver to the homepage (see my question below). If you have suggestions on these settings I would appreciate it.

As I mentioned, it did not like the Divx-encoded AVI's that I have. I do have some very large uncompressed AVI's - Flash CS3 pulled these in very cleanly. The conversion to FLV made them nice and compact.

* * *

Question: I am still hung up on this following question... Given this approach (progressive download), if my client wants a 720x480 video (for instance) auto-started on the homepage, what bitrate/resolution/other-measure video of what length could I reasonably implement?

How would I know if I implement a video that is too large?

If you could give me a few examples of some video dimension, bitrate, duration combinations that would be OK (given the bandwidth of a typical household), it would be extremely valuable.

My client wants a 720x480 video of 30-60 seconds (in a loop) of the highest quality/resolution I can give him. If you can tell me if this is do-able... and tell me whatever other settings I need to choose (e.g., bitrate, quality, what flash player to support...the stuff that is prompted for in the wizard-like process.), I would be forever in your debt...

Thanks,

Tom K.

[Eye for Video]

Hope things go well with your test tonight.
Here are a few of my thoughts:
As far as bitrates go, think in kilobits, not bytes (8bits = 1 byte), a dial-up line is 56kbps, DSL can start at 128 to 256kbps, a T-1 line is about 1.5Mb, high speed cable can run from 1.5Mb to 10Mb or so. All those lines will have overhead, other files using those lines so typically you need to figure only about 70% (or less) of that bandwidth will be available for a particular video file. So that is the measure of the pipe size of data coming in.
The next important component in discussing video bitrates is the measurement (in pixels) over which all those bits of info will be spread out. Think of this as garden hose delivering 15 gallons per minute. If you are spraying this water out over a 10’ X 10’ patch of garden, in 1 minute, you can wet it all down. Now take that same water stream and spray it for 1 minute over a 100’ X 100’ patch. Exact same bandwidth, but a much different result.
So, using a typical Web video size of 320 X 240, a bitrate of less than 200kbps will result in a pretty low quality, 350-400kbps second is fair to good, 500 and above will produce very good quality. Spreading that same amount of data (the bitrate) out over a larger area…. well then quality starts to really suffer.
Moving up to 480 X 360 requires 2.25 times the data (bitrate) to maintain the same quality.
640 X 480 requires 4 times the data.
720 X 540 requires 5 times the data.
So for a good quality 640 X 480 video it would require 400kbps X 4times the data = 1600kbps (1.6Mbps) then throw in the Internet overhead, and you’ll need a 2.4Mb connection. It’s just not reasonable to think the majority of viewers will have that speed. Lower the quality or reduce the physical size of the video to match a more realistic Internet speed. In my experience, any time my video get up toward 600-700kbps, lots of viewers see lots of stop/start as the video buffers, plays, buffers, plays.
I would advise you to design for the future (faster connections) but be realistic on what’s available now.
Now, if I may get a little technical…I noticed you mentioned using a 720 X 480 video. Standard video width X height ratio is 4:3 and wide screen is 16:9. Well 720 X 480 is not a 4 X 3 ratio, is it? So what’s up with that? Here’s the crux of the matter.. not all pixels are created equal!
Computer monitor pixels are square while television pixels are rectangle, they are taller than they are wide. Ain’t that the dangest thing! So it only takes 480 television pixels to equal 540 computer pixels. Each will produce an image with a ratio of 4:3, (width:height). So if you are using a video produced for television on the Internet, you may have to resize it slightly (about 10%). Watch for a slight squatiness to the image…
Whoowww, back to your points. can you start with a loop of “720x480 video of 30-60 seconds”… no way, unless you cheat. Oppps, did I say that?
Let’s just say your average viewer download speed can handle 500kbps. Your video requires 5 times that speed! You’ll need to deliver a very small file to the viewer imediately. This can be a text animation or a simple vector graphic animation. Drag this out for 8 to 10 seconds while the video is loading in the background. Then run the video! With a short 30 second video you may just stay ahead of the play rate.
Enough for now
Eye for Video
www.cidigitalmedia.com

[tomkirk23]

EfV -

Ok, I have gotten it working...(I cut it down to 1 minute and may go smaller as I experiment)

However, the controls are not visible when I mouse over or click on the video. Also, it looks like it is stopping short of completion and freezing (shorter versions do not do this).

Also, it looks as thought e "Bandwidth Profiler" (option on Test Movie) may be helpful to me in correctly sizing the video

Tom K.

Also: In the Timeline, am I supposed to be able to move through and view the frames of the movie? (all is see is a black screen with a FLV logo superimposed). I cannot actually see the video from within the timeline, even when I move the pointer to later parts of the video...??

[tomkirk23]

EfV??

[Eye for Video]

As for moving through the timeline, how have you placed the video or video player on the stage? If you have placed a movie clip or video element on the stage (Actionscript controlled) which will play the video, it will only be in one frame, so you can't scrub through it. If the entire video has been embedded, filling a whole bunch of frames, you should be able to scrub through and see various frames. Problem with doing that is once you publish the file, the .flv is converted into a .swf. Plays fine but creates a huge file. This may be why it get's skippy toward the end of the video.
Here's an example of a one frame player. From the Library panel, the little box in the far right top corner, open and choose "New Video". That puts it in the library. Drag the video onto stage, give it an instance name "video_screen". Change the ns.play file name to the name of your video file.

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);
video_screen.attachVideo(ns);

ns.play("pac_el_logo.flv");
/* or ns.pause("pac_el_logo.flv");
if you want to control start with buttons */

That's all it takes to play the video. Controls will be dependent on how you place video on stage. First, get the video to play without problems.
EfV

[Joshua78]

Hey Tom, a few developers of mine have used Fliqz Inc. in the past. Supposedly they take away all of the heavy lifting of providing video in your clients specific look and feel. Maybe their service will be able to help you?

Josh