Feb 21

Trying to get flash video into iWeb eh? You can’t bring it in like you do a regular flash .swf file. Flash video extension is .flv and it can’t work without some sort of .swf player to go with it. This video shows you some tricks to get flash video into iWeb. There are quite a few different options and this tutorial will show you how to get your flash video in iWeb in many different ways.

Here are the steps below:

VIEW DEMO »

Step 1:

Get video you desire to be a flash video and convert it to .flv format if it’s not already.

How do I convert my video to flash video you ask?

Well there are a number of different ways.  You are going to need one of these converter below:

  • Adobe Media Converter (comes with CS4 or Flash Video Encoder from CS3)
  • Visual Hub (no longer in development, but if you got it while it was out, lucky you)
  • Aimersoft Video Converter ($65)
  • Perian QuickTime Plug-In + QuickTime Pro (Perian is free, QuickTime Pro is $29)
  • SoThink FLV Converter ($45)
  • FFMpegX (Free, but it requires some external file installations, they make it a little difficult to get, so here it is made easy by me.  Click here to download the app and here to download the extra files.  Your welcome ;-).  You can get instructions and more info on the software here. After you open the .dmg file and drap application to your app folder and launch the app it will ask you to locate 3 files to add onto it.  They are the ones I provided.  I would recommend moving them to home folder/library/application support/ffmpegx (you’ll make this folder)/put 3 files here that were in the .zip folder here.  Then in the FFMpegX App you’ll know where to find the 3 files to install and they’ll be in a safe place where no one will touch them.  Hope that makes sense.  If it sounds to complex, just go buy one of the other converters above to make life easier for you.)

Which ever converter you use, just convert that video file to a .flv format.  So in a nutshell, step one is convert video to .flv

Step 2:

Download the Longtail Video JW player by clicking here»

You’ll be downloading a .zip file.  Double-click to open and inside you will see 2 files; one called “player.swf” and the other “swfobject.js”.  We will need these files to make this work.  So now we should have a total of three files

  1. Our .flv flash video we converted in step one
  2. player.swf file
  3. swfobject.js file

We just need to do one more thing and we’re ready to roll

Step 3:

We’ll need to have an image that will sit there until the user decides to click play.  So just export out a frame of your video.

It might be easier to go back to your original video to export out the frame.  You can do this in QuickTime pro, iMovie, Final Cut, and many other apps.  Or if you want to make it simple, just play your video, stop it on a frame that you would like to be your hold image and do a screen shot.  You can do a screen shot by pressing “command + shift + 4” on your mac, then draw a box around the frame of video your holding on.  When you let go you’ll have a new .png still frame  on your desktop.  We are going to use this to be the video preview.

You should now have four files.  Fyew.  These are all the files we need and we are ready to roll.  So we should have these four files

  1. Flash Video (our .flv video we converted in step one)
  2. “player.swf” (file we downloaded in step 2)
  3. “swfobject.js” (file we downloaded in step3)
  4. Preview image (file we created in this step.  You should name it preview.png)

For file size reasons you may want to open that image you created in step 3 in the application “Preview” and choose file>save as and save it as a jpeg image and bring the image quality down a bit so that the file loads quickly on the web.  Just a suggestion, if you have photoshop you could choose file>save for web and size it down that way too.  You can use a .png file or a .jpeg file for this

Step 4:

Now put those four files (.flv, .swf, .js,(.png or .jpeg)) onto the server, meaning your iDisk or your own ftp server.  If your using MobileMe I’d recommend making a folder called flash in this location: iDisk/Web/Sites/flash/put 4 files here. Just make sure you have these 4 files on your iDisk or server all all will be well.

Step 5:

Almost done.  All we need to do now is use the below code in an html snippet and replace the items in red with our own server path names.


<script type="text/javascript"
src="https://web.me.com/yourusername/flash/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('https://web.me.com/yourusername/flash/player.swf','mpl','720','480','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=https://web.me.com/yourusername/flash/yourflashfile.flv&image=https://web.me.com/yourusername/flash/yourimage.jpg&stretching=none');
so.write('player');
</script>

Just replace the items in red with the path that goes to your files on the iDisk replacing the appropriate names to point to the right place.  So be sure to put in your MobileMe username and your correct flash video name (yourflashvideo.flv) and your preview image (myimage.jpeg or myimage.png).  Also be sure to adjust the width and height of your video with the 2 numbers that are red in the code.  Once it’s all updated and you have all your links pointing to the right spot, hit “apply”.

Done!

We now have flash video in iWeb successfully! Yay!

Hope it wasn’t too complicated for ya.  Just do it a couple times and you’ll have it down in no time.  There is a video I made that will walk you through this too if you’d rather look at that.  Just got the Video Tutorials section and it’s all about flash video.

Note: You can use Longtail Video JW Player on your site for free as long as your not selling anything, have ads on your site, etc.  If you are doing those things you need to purchase a license.  It’s €30 (Euro) which is about $41 dollars.  You can purchase a license here»

More Notes:

If your wanting to customize the JW player, they have a nifty little embed code creator that you can tell it what paramaters you want to be set.  Click here to go to it.

58 Responses to “Video Tutorial-Flash Video in iWeb”

  1. Eternal Polk says:

    Hi. I got this to work with jwplayer, but when I try using Flash all I get is the player with the bar showing it’s trying to load the video. I tested the html and it plays when I double click it and in Coda it operates fine but when I load it on the server it has problems and won’t show up in iWeb. I did a local test and removed the FLV file on my drive from the folder it was in with the html file and I got the same problem…the player searching for the source FLV file. Can you help solve this as I really want to use the flash player

    • Eric says:

      Same issue for me… tried this too many times now… driving me crazy… the player just sits searching for the FLV… but when I try the index.html it works fine… and also works fine locally.

      What is the issue… please email me?!??!?!?

  2. agostino says:

    I have a problem about dimention pf the video,
    I changed to 640×352, the blue frame in the prewiew when i applied a the rights dimention but the video appear inside the frame smaller
    in the server i put also the jpg picture but doesn t appear
    thanks for your help
    agostino

  3. GH23 says:

    Love this site! I successfully added flash to one of my sites (mototvnetwork.com), go to Moto TV Demo for example. It looks fantastic.

    But I am lost because I can’t get it to work on my other site (garagefilms.biz). I did everything the same, flash folder inside same folder as index.html file, same code (copied and pasted, made necessary adjustments), and it actually works and plays inside iWeb, but doesn’t on any browser (Safari or Firefox). Is it something to do with the .biz end? I can’t imagine that would be it, but that is the only thing I see different.

    Thanks in advance if you have any suggestions.

  4. agostino says:

    Pourquoi ce code me donne des video plus petits de la dimention enregistre et la photo par contre s affiche bien??????
    Aidez moi SSVVVPPP Agostino

    This text will be replaced

    var so = new SWFObject(‘http://web.me.com/amidejulien/player/player.swf’,’mpl’,’640′,’352′,’9′);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘flashvars’,’&file=http://web.me.com/amidejulien/player/agos3.flv&image=http://web.me.com/amidejulien/player/agos3.jpg&stretching=none’);
    so.write(‘player’);

  5. agostino says:

    j ai essaie avec ce code mais rien

    svp pouvez vous m aider pour arriver a avoir aussi la video de 640×352
    Merci Agostino

  6. agostino says:

    Hi, i put ma video agos.flv inside flash dossier with the others elements when I click in index.html in flash program simulation works, but when I put this in IWEB a white window appear and the player searching for the source FLV file. it turn, turn , turn

    please tell me Ago
    Your browser does not support IFRAME

  7. Jack says:

    Can you provide more links to the code please, next time you edit your site?

  8. madnis says:

    Thank you for the video tutorial! Is it possible to make the flash video automatically start on our web page, like we can with the quicktime files?

  9. Eric says:

    I can’t find the code on the site to cut and paste into the HTML snippet. Please provide.

  10. Joyce says:

    Thank you for the great tutorial!

    How do I adjust the URL to the right location, if I don’t use MobileMe? I am using a web hotel (one.com).

  11. iWebUnlimited says:

    I just added all the steps and code for this video in text below the video. Hope that helps.

  12. jamie says:

    What is the code t access my flash files on my ftp server? i assume i need to somehow enter the password.

    Thanks.

  13. Brandon says:

    This is exactly what I was searching for and it works great. Thank you for posting such clear and concise directions.

  14. Kimmy says:

    Hi! this tutorial really helped. I followed the instructions and flash worked very well..But I am still wondering how I can do autostart the flash when I open browser. is there any tips? Thanks in advance!!

  15. Hey friend , This is excellent posting for my homework from college Do u have twitter account ?? i want to follow your twitt . bye

  16. Bruce Harper says:

    When I cut and paste the code into iweb and make the changes I get this: This text will be replaced. What do I need to do?

    My code with changes:

    This text will be replaced

    var so = new SWFObject(‘http://domainhost/mediaplayer/player.swf’,’mpl’,’720′,’480′,’9′);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘flashvars’,’&file=http://domainhost/mediaplayer/video.flv&image=http://domain/mediaplayer/preview.jpg&stretching=none’);
    so.write(‘player’);

  17. Joe Guido says:

    I get the same error as Bruce does above. I have entered the code exactly as directed. I’m in Iweb 08, does that matter?

  18. Ole says:

    Hi,
    first, many thanks for the great tutorial!
    Just one question:
    Is it possible to switch off the “share, embed and info” window at the end of the video? I don’t want it…
    Thanks,
    Ole

  19. Daniel Prada says:

    WOW! You are amazing. I have been hunting for this very same information for weeks! This is the MOST comprehensive tutorial on doing anything in iWeb! Thanks!

  20. Joey says:

    Can you included the html code (to go in a snippet) for longtail’s mediaplayer-5.3-viral player???

  21. erick says:

    how can i autoplay my flash video?, what do I have to put in the flash code to make my video autoplay?
    please help!! thank you

  22. Dan says:

    I’m way new at this.
    If I’m not on mobile me, what would my ‘username’ typically be? The website address? Also, what’s the third number you have listed for the video size (ie. ‘720’,’480′,’9”)

    thank you
    Dan

  23. Jim B says:

    I’ve followed the instructions to the letter as far as I can tell, but when I click ‘apply’ I get only the text message:

    “This text will be replaced”

    Any advice gratefully received.

    Thanks,
    Jim

    This text will be replaced

    var so = new SWFObject(‘http://web.me.com/stationhouseuk/flash/player.swf’,’mpl’,’720′,’396′,’9′);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘flashvars’,’&file=http://web.me.com/stationhouseuk/flash/RW7_E14.flv&image=http://web.me.com/stationhouseuk/flash/RW7_Preview.jpg&stretching=none’);
    so.write(‘player’);

  24. Jim B says:

    Correction – didn’t paste in full text. Should have been:

    This text will be replaced

    var so = new SWFObject(‘http://web.me.com/stationhouseuk/flash/player.swf’,’mpl’,’720′,’396′,’9′);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘flashvars’,’&file=http://web.me.com/stationhouseuk/flash/RW7_E14.flv&image=http://web.me.com/stationhouseuk/flash/RW7_Preview.jpg&stretching=none’);
    so.write(‘player’);

Leave a Reply