FOTD 14: Dreamweaver 8 – Flash Video

UPDATE: I’ve seen many referring to this post after 2010 in regards to technical support/usage issues.  Please note that this post was published in August, 2005 in support of Dreamweaver 8, which is currently 4 versions old and not officially supported anymore. Comments are being closed, so as to not confuse this historical post with current, supported versions of Dreamweaver and video functionality within.  Apologies for any confusion.

In an earlier FOTD, we looked at the workflow for importing and converting Flash Video in Flash 8, and today, we’re going to look at how you can use the resulting FLV files in your Dreamweaver 8 sites using the new Insert Flash Video feature. Well, it’s not an entirely new feature, as the Insert Flash Video command/feature was known in the MX 2004 era as part of the Macromedia Video Kit – a separate product/purchase- but it’s now rolled into the product as a full-fledged, official (and also updated) feature of Dreamweaver 8. Time to explore- let’s dive in.

First, to be clear- this Dreamweaver 8 feature is strictly intended for embedding pre-encoded video clips into web pages quickly and easily- not encoding video to the FLV format, which is accomplished via Flash 8 or the Flash 8 standalone video encoder (all part of the Studio 8 suite of tools). To customize the user experience beyond the steps in this FOTD, you’ll need to delve a bit into Flash- but if you’ve read this far you’re either interested or already on board, right? :)

Anyway, so you’ve got an FLV video file on hand that you’d like to place on your Dreamweaver site. Just open the page you’d like to insert it into, place your cursor in the right location, and select ‘Insert > Media > Flash Video…’ and you’ll be presented with the Insert Flash Video interface.  Let’s step through the elements/options you’ll find here.

First up, you can choose between Progressive Download Video (i.e. the FLV file sits on a web server and is progressively downloaded/played by the Flash video object in your page), or ‘Streaming Video’ (i.e. a Flash Communications Server-based FLV file which is streamed directly to the player). If you don’t have access to a Flash Communication Server, then you’ll probably use the first option most commonly.

Next, you’ll enter the URL to your FLV file on the server. Pretty straightforward.

The ‘Skin’ menu will let you choose from the preset Flash Video player skins that ship with Dreamweaver 8. You can also customize these skins and create your own, but that’s a much more involved subject I’ll cover at another time (as well as during my Flash Video session at the MAX 2005 conference, if you’re attending this year).

The ‘Width’ and ‘Height’ parameters are simply the height and width of your FLV file. You can always click the ‘Detect Size’ button to autofill these based on the FLV file you’re embedding, but if you decide to resize the video here, make sure to click the ‘Constrain’ checkbox so when you change one of these values the other will be updated correctly to keep the aspect ratio of your video unaltered. There are many creative reasons to squeeze and/or stretch video, but this isn’t exactly the best way to do it (always recommended to export the FLV at the final size you’ll be using it at, that way the Flash Player isn’t spending processor time and horsepower converting the video’s size at the expense of smooth playback for your site visitors.

Auto Play, when checked, will simply tell the Flash Player to start playing the movie as soon as enough of the FLV file has progressively downloaded to ensure it will complete without pauses or ‘hiccups’ (note that this also can be affected by network speed and other considerations, so it’s never an exact science). Auto Rewind will return the ‘play head’ to the start of the FLV file when it’s finished playing through the entire file.

The final step is an interesting one- you can have the Insert Flash Video process include a small blurb to prompt users to download the Flash Player if they don’t have it installed. A handy addition that will help make the experience smoother in the edge-cases of browsers without the Flash Player pre-installed (do they still exist?)… :)
I should also note that Dreamweaver 8 will also detect the codec (Sorenson or On2) used in the FLV file, and write the object code (and generic player detection code) appropriately- Flash Player 7 for Sorenson and Flash Player 8 for On2 VP6 (the new video codec introduced in Flash Player 8). This really helps optimize the user experience, behind the scenes, without needing to lift a finger- just let DW8 do the heavy-lifting for you.

Once you’ve selected your choices above, just click the ‘OK’ button, and you’re done! You’ll see a grey(ish) box with a Flash Video icon representing the object in your page, however- you’ll need to preview your page in order to see the actual Flash video and player in context. When you upload to your remote server, however- make sure to also upload the two new ‘dependent’ SWF files in the same directory – one ‘player’ SWF (either progressive or streaming, based on your choice), and one ‘skin’ SWF containing the interface elements for the player controls (again, based on what you selected in the Insert Flash Video interface).You won’t need to jump through hoops to change properties of the object if you’d like to change settings, however- the Property Inspector will always give you direct access to the important settings if you’ve got the object selected.

And that’s basically it- you’ve just inserted a Flash Video file into your Dreamweaver page- no fuss, no muss, fun for the whole family. If this has piqued your interest, make sure to check out my prior post on the Flash 8 Video Import Wizard, as it covers the encoding options you have available when creating FLV files in Flash, and helps ’round out’ the workflow in this FOTD. And stay posted- there will be more on Video coming up in these posts, and if you’re going to be at MAX 2005, I’ll be presenting a session on Flash Video and Dreamweaver that will get into much more depth on the subject.

See you again tomorrow for another Flash 8 feature!

36 Responses to FOTD 14: Dreamweaver 8 – Flash Video

  1. Jack says:

    Do the people need Flash player 8 to see the flash video clips that are Inserted in this way?Like it will take some time for everone upgrade there flash players…(All people help out and put a need flash player 8 to view this site button!)

  2. Jack-No- Flash Player 8 isn’t required for all FLVs inserted in this fashion. As noted, the object/embed tag is written for Flash Player 7 when using the Sorenson codec, and for Flash Player 8 when using the On2 VP6 codec (which is, of course, only supported in the new Flash Player 8). So for the widest compatibility, just encode your FLVs with the Sorenson codec and you’ll have very accessible videos.

  3. zack says:

    Whenever I try to use this feature in DW8, I recieve an error that I know others recieve as well. It says that “The URL cannot contain spaces or special characters. Change the path or file name and try again.” This happens after I have the url in and try to click OK to actually insert the video. Any ideas? Thanks for you time.

  4. Well, I hate to ask the obvious, but… well, do you have spaces or special characters in the video file’s path or filename?(make sure to check the names of the directory path to the FLV file, as well- that’s usually where the problem lies)That’s usually the only reason you’d get that error, and it’s of course a valid one- you should NEVER use spaces or extended characters (save maybe – and _ characters) in either paths or filenames. Browsers may ignore this depending on your site/server/etc. but it’s never good practice.Check each directory up from your FLV file too, and if you see any spaces/extended characters, then fix them (use underscore characters to replace spaces in pathnames- that’s the most common offender) and you should see that error go away. Outside of that you’d need to post the page and send a URL, as I’m just guessing what your specific case may be.

  5. Al says:

    I have followed the steps above. I am using a Mac g4 with Dreamweaver 8. Everything plays fine until I ftp the files to my server. I get a blank area where the video is supposed to appear. If I right click the area I get the flash player options..any ideas??

  6. Make sure that:a) the links to your FLV file (within the inserted object/embed tag) are correctly-formatted for your web server- i.e. you’re actually pointing at the FLV correctly where it will reside on the server.)b) you’re not serving up the FLV file from another server (this can lead to cross-domain issues, in which you’d need to create a policy file on the hosting video server)c) try uploading the FLV file in a separate FTP client (I’ve heard some rumors of filetype mismatches causing FLVs to transfer from DW as ‘text’, not ‘binary’, which can destroy ’em.d) last-ditch effort, confirm with your ISP/post that you have both FLV and SWF mime types registered with your server, and that there’s no other ISP-related restrictions to serving up the video files.Honestly, it sounds like a munged file path to me (a) if the Flash Player is loading but you’re not getting anything. But it’s hard to tell without a link to the source code you’re using, honestly. If none of these help, please post a URL- hard to see what’s happening w/o source. Thx!

  7. Ross says:

    I get the same error message “The URL cannot contain spaces or special characters. Change the path or file name and try again.” with whatever i type for the url, be it or anything else even a single letter.Is there something that has to be done before attempting to put in the url.The help file mentions flash video needing to contain ‘metadata’ would this be causing the problem?

  8. Again, it’s impossible to guess at what’s happening unless you post a URL to your page in question. I’d need to see the source of your page to make any guesses here.

  9. Matt says:

    I am getting the same problem and the url I am posting is: try over and over and it never works!!!

  10. Um, Matt- that link points to an MP3 file, not a Flash SWF. You’re definitely never gonna see video from that URL. ;-)

  11. Meredith says:

    I was using Dreamweaver MX before DW8 and am not proficient at all in Flash; therefore, I’m very confused about the difference betw/ Inserting Media (a .mov for example) into my webpage vs the Insert Flash MovieIs there another way to insert a movie other than the Flash thing? Do I need to have Flash to insert the DW8 way?Thanks!Meredith

  12. Hey, Meredith- MOV files use a slightly different embed tag- this post is specifically about inserting Flash video. You could use the ‘Insert > Media > Plugin’ command (see first screenshot in this posting, it’s a little further down the menu) to insert a generic embed tag pointing to the QuickTime file, of course. However, this requires that the browser have QuickTime installed, which is not guaranteed (esp. on Windows machines).In most cases I’ve seen, FLV (Flash Video) files are smaller and faster to download than QuickTime files – and have much better reach for browser-based video as Flash is installed by default on more platforms/machines/browsers than QuickTime- so I prefer using Flash video for that reason alone (my rather biased opinion, of course). Hope this helps out!

  13. Almost forgot, Meredith- you don’t need Flash 8 to embed an FLV video file in your web page the Dreamweaver 8 way, but you will need Flash 8 Pro to encode a video file to the FLV format. You can also buy some third-party encoding tools such as Sorenson Squeeze 4.2 and Flix Pro, which do very good jobs of encoding to FLV format (with additional options to boot).So yes- I’d strongly recommend a copy of Flash Pro 8 (or one of the alternative 3rd-party encoders) to fully exploit the FLV video format in your projects, unless you’ve got a friend who can encode your videos for you, of course… ;-)

  14. Todd says:

    Alright this is driving me bonkers… I’m getting the same error code as other people here””The URL cannot contain spaces or special characters. Change the path or file name and try again” as soon as I hit ok on the insert flash movie.Here’s my url “resources/video/volkswagen/beetle/beetle.swf”Where are the special charachters? It doesn’t matter what I put here, it always has the same error….ARGH!!! Please help!

  15. Todd says:

    Forget it I’m a dolt. Trying to pull .swf. Working now that I’m pulling .flv.Thanks!

  16. Todd says:

    Ok another question. Is there a way to default the sound to mute? I want the video to automatically play…but without the sound (I want the viewer to have the option of listening, but not have to turn it off right away)THANKS!-T

  17. grant says:

    i’m receiving the same problem with my DW8. i’m browsing to the appropriate folder on my local server:/video/cuttie.flv (i also tried .swf, but to no avail)i ran the Macromedia updater to make sure my DW was current. still no dice. any ideas?thx,grant

  18. Todd- you can’t set volume levels with Dreamweaver’s ‘Insert Flash Video’ feature, only tell it whether you want it to auto play or not. I’d recommend the latter if you don’t have access to Flash 8 Pro- the DW8 feature is really a basic ‘insert’ functionality so will not be nearly as rich as ‘rolling your own’ in Flash.If you have access to Flash 8 Professional, you can of course use the FLVPlayback component (or Video class) to implement your own player- just check the online help in Flash 8 for the FLVPlayback component reference entries, which have all the details.Grant-I’d try changing your file path from absolute to relative in the HTML code, but as I’ve never seen this error occur myself I couldn’t say with any certainty why it’s happening. I’d suggest contacting Adobe technical support for a deep-dive on your specific files if changing the URL scheme doesn’t work (you also may want to try previewing it on the remote server as opposed to the localhost/local server – as if your two servers handle relative/root-relative URL paths differently you may see different results on each). Hope this helps!

  19. Judy Doi says:

    I have the same problem as the guy above who cannot see or hear his video, just gets a blank page. This is some of what I have discovered. If you have upgraded your server, you need to check with your server co. to see if it can accept the flv and swf formats. We upgraded from Windows2000 to Windows 2003 and now it doesn’t work. In an online forum, someone said that if you change the mime code to “video/x-flv”, it will work. How do I do that?

  20. Hi, Judy-I don’t use Microsoft software (my main web server platform is *NIX/Apache), but it looks like this technote at Microsoft’s site may be helpful:Working with MIME Types – MS TechNetIf you don’t have direct access to configure your web server (or are using a hosted/shared-space server), I’d strongly recommend contacting your hosting provider’s admin/support group directly to address this, of course. Hope this helps out.

  21. stanley says:

    has anyone solved the “your url cannot contain spaces and special chars” error yet?i need an answer and i need it as soon as possible.. thanks

  22. I haven’t been able to reproduce that problem myself, Stanley- so no, I’m not aware of any solution to your problem. If you need answers quickly, the official tech support is your best option (I only dig into issues myself when I have free time to spare- which is, alas, rare these days).Tech Support – Flash Email Form

  23. I experienced the same problem. It seems the feature can only be used for .flv files. I was trying to use the .fla. Go back one step to the converted flv and it would work.

  24. Well sure- pointing to a FLV file is most definitely a hard requirement! That is, after all, the format Flash Video is saved into. An FLA or SWF most certainly wouldn’t work as your video file URL.

  25. SCOTT LEITER says:

    I would like my visitors to see a freeze frame of my video when they hit the page instead of a big black placeholder. Is there any way to do that with this command or do I need to get fancy in Flash?For example if you goto the galleries you see stills of their movies, when you hover over the still, you get the pause/play controls to then play the movie. I’d like to do the same on my site.

  26. Yep, Scott- for more complex effects like video rollovers and the like you’d need to jump into Flash Pro and author the interactivity there. The DW8 ‘Insert Flash Video’ feature is really just a bare-bones video player for embedding in (x)html pages.

  27. SCOTT LEITER says:

    Thanks – Time to break out the book and learn a new program.

  28. rdc says:

    Hello everyone.Wich one gives yhe best quality, On2 or Sorensen?TYou

  29. On2 VP6 has the best visual quality, and by a long shot. Sorenson is still great for those cases where you need the most backwards-compatibility, however.

  30. leo says:

    Hi Scott,I know this can be done ’cause I see it all over the place — but what if I wanted to prevent auto-downloading of a flash video.The user would have to click on a thumbnail to start downloading the video. I mean, I might have half a dozen videos on one web page and maybe the user would only want to see one. So no reason to start downloading anything until the user indicates which one he or see wants.Another case would be where I have a short promotional movie tucked away somewhere on the home page. It’d be anoying for the user to automatically download this (that is if they noticed).So could you point me to the magic recipe where you’ve got the flash movie embedded in a webpage but the video it contains only starts to progressively download when the user clicks on the “place holder” thumbnail.Any help would be appreciated.LEO

  31. OK I found this web page, and was initially excited (well I’m still excited but not as….yet)I can share with alot of these folk above with “genuine” problems after having read your great instructions properly. However here’s my problem. As with someone else above me, when I press F12 in Dreamweaver 8, the video window comes up fine, the flv comes up in the window and plays fine, and all is good. I upload the entire folder in its entirety to my web server, and all I get is a little line down the bottom of firefox or netscape saying “waiting on….”and nothing in the main browser window. I right click in the area where the video “Should” be and I get the flash dropdown menu, so am now wondering what is happening. Thoughts from anyone would be muchly appreciated.I’m keeping the flash file in a folder called “flash” within the main webpage folder which is ahead of time for any ideas or suggestions, and many apologies ahead of time if I’ve missed somethingMichael

  32. Usually means you haven’t uploaded all your files to the web server, or your web server doesn’t support the SWF and FLV mime types. I’d check your remote server for the former, and ask your site administrator/ISP support on the latter. HTH!

  33. Leo- you’ll need to dive into Flash 8 and Actionscript for this, the Dreamweaver ‘Insert Flash Video’ feature (and it’s stock player) does not support that type of embed.I can’t write the code for you, but would suggest looking into using the FLVPlayback component in Flash 8 along with a JPEG/PNG thumbnail/frame (so you can specify/customize it as needed). When the user clicks the JPEG, hide it (revealing the playback component underneath) and then attach the FLV URL to the component so it can start downloading/playing back. Related topic in Flash 8’s online help would be the FLVPlayback component (in the Flash 8 Component Reference).HTH!

  34. David Ringer says:

    I have the same problem with getting the “The URL cannot contain spaces or special characters” error. The issue I have is that the default name for my system hard drive is Macintosh HD. Can it really be that difficult that I have to change the name on my system drive?

  35. Brant Dye says:

    When I insert an FLV as progressive download and view it in firefox I get a whole bunch of random icons, like play, stop, pause, etc. I have inserted the flv on a blank page as well to make sure there is no weird code problems. I’ve even uploaded the video to server and tried it that way and still get the weird icons. Is it a possible glitch or am I doing something wrong? Has anyone else experienced this. PLEASE HELP!

    • sfegette says:

      Strongly recommend using the HTML5 Video Widget for now, which requires DW CS5 and the free Widget Browser (download directly from the ‘gear’ icon in the Application Bar in CS4/5). This widget will help manage some of the oddness in video implementations right now due to all the chaos around browser-based rich media, and allow you to serve HTML or Flash-based video appropriately based on the end browser/viewer. Aside from that, I’d recommend looking into the Firefox docs for the version of FF you’re using (incredibly hard to make any suggestions without knowing the version of Dw, Firefox and Flash Player you’ve got installed, how you’re actually compressing the video file, the code in your page and any css that accompanies it, what fallbacks you may have embedded in the object element, et al).

      If you’re using a supported version of DW (which would be CS4/CS5), definitely open a support ticket if this doesn’t help out, I can’t really debug remotely- sorry!