Video Tutorial-Flash Video in iWeb

58
17690

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 comments

  1. pieter 30 November, 2010 at 17:16 Reply

    it doesn’t work on my website, can someone tell me what i’m doing wrong?

    i use the for the html box

    This text will be replaced

    var so = new SWFObject(‘http://ftp.gedrevenmus.be/Flash/player.swf’,’mpl’,’720′,’480′,’9′);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘flashvars’,’&file=http://ftp.gedrevenmus.be/Flash/Australië-9%20november.flv&image=ftp.gedrevenmus.be/gedrevenmus/flash/Preview1.jpg&stretching=none’);
    so.write(‘player’);

    • suesue 17 March, 2011 at 03:54 Reply

      Dear Pieter,

      I know it is long time ago, that you posted this comment.
      I am interested, whether you solved the problem,
      since I am trying since days to get my movie.flv onto my page,
      without success!

      In case you found a solution, I would be very interested!
      Swantje

  2. Doug 13 December, 2010 at 18:58 Reply

    I have spent many hours playing w/ this and can’t get it working. I am really only interested in publishing my site to my local machine for some training. It looks like I am close. The preview graphic shows, but the video won’t play when I click the play button (the timeline at the bottom of the screen measures 0:00 at both ends).

    If I try to actually publish to my site I get “this text will be replaced” … that’s it! Here is a link to that page:
    http://klockwise.com/klockwise/Movie.html

    Any thoughts?

  3. Andres Aceves 6 January, 2011 at 10:42 Reply

    Hey everyone!

    Happy new years! the best for you all!

    1 Question,

    How would I be able to make my video start at a point it won’t stop. like I play it on my website, and halfway it stops for a bit, then plays the rest, then again stops for a bit…

    How could I avoid that from happening?

    Thanks alot!

    • suesue 17 March, 2011 at 03:59 Reply

      Hi Greg,
      I am new here, so an answer comes maybe a bit to late.
      If not:
      What I did: I just pressed the “here” at step 2 and than the two files downloaded by themselves…
      for not money …

      Swantje

  4. Eddie House 28 January, 2011 at 22:13 Reply

    Great! This works perfectly BUT the only thing is I’m trying to use it as a background and I can’t do that because text, photos, shapes etc. won’t go over it… How can I do that? Please help!

    Thanks!
    E

  5. Tom 7 February, 2011 at 09:38 Reply

    Hi,

    Great tutorial. I was able to get the jwplayer to work great in iweb, but when I publish to my site, the player does not appear. Strangely, when I view the source code of my website from safari, the code that I put in the html snippet box in iweb is simply not there. Can you help?

  6. Bob 18 February, 2011 at 22:20 Reply

    Many days trying to get this working. I need to know how to enter pointers to my server… not an iDisk. I can’t take another failed attempt by continuing to flounder. Could you please publish an example of the code to copy in to the snippet that depicts conventional server information and at what level? I have several sub domains. Should I use the root level of my main domain for the flash folder? I know there has o be a clear way to get iWeb to see the server. It works great and is live when I am using the You Tube widget.

  7. Paolo 6 March, 2011 at 01:32 Reply

    Hallo, it s been for days that i m trying to do what you explained in this page without success. I exclude all the passages until when i have to write
    ttp://web.me.com/yourusername/flash/swfobject.js”

    the question is, do i have to write in the yourusername place my USER NAME TO ENTER IN MOBILE ME WICH IS THE EMAIL ADDRES LIKE PAOLOPESCIA@ME.COM OR THE NAME OF THE ADDRESS OF THE SITE AFTER LIKE WEB.ME.COM AND THE SUITE LIKE PAOLOPESCIA/AMISKO.HTML???
    Please help me i have lost too much time in here.
    Thanksssss

  8. Paolo 6 March, 2011 at 05:26 Reply

    Sorry another question, Why when you show in the video tutorial the passage of the code directly in Iweb there is the code”http://web.me.com/yourusername/FLVIWEB/jwplayer/flash/swfobject.js”>

    and in this page there is no FLViWEB/jwplayer after your user name?
    Still no function sorry could you help me please? I perfetly follow your advises!

  9. Robb 3 April, 2011 at 07:40 Reply

    I have successfully used the code and feel like a coding genius! BUT:

    I have tried to add auto start code into the code above to no success. Can anyone suggest code and where exactly to put it?
    Thanks

  10. elliot joseph 31 May, 2011 at 22:31 Reply

    I am getting the HTML “this text will be replaced”. I’ve tried my username and with the me.com.. I use godaddy as my site publisher. Does this have anything todo with why the flash will not work? Thanks.

  11. Paul 16 June, 2011 at 05:43 Reply

    I have a small problem – when I publish my video and head to my website to review it, the video is a lot smaller and in a 4:3 aspect ratio when it plays! I have change the parameters in the code to match that of my video – 640 x 352 – and it plays ok, just really squashed.

    Any ideas??

    Thanks!

  12. Paul 16 June, 2011 at 06:20 Reply

    Ok, I think I might have an idea why I’m having a problem. I am trying to add a second flash movie to tha same page – can I and do I need to add a new .swf and .js file?

  13. kingjutsu 7 September, 2011 at 13:34 Reply

    I downloaded quicktime pro, only to later find out that apple had to remove the “movie to flv flash” feature due to copyright issues with adobe. Be aware that you can’t change the video format with quicktime pro anymore!

  14. cjones 7 September, 2011 at 20:08 Reply

    Great tutorial but I am having the same problem as others. Everything works locally but once I add it to my server the content will not show. The skin appears but that is it. Please help us out! Thanks in advance

  15. Wallzaker 5 August, 2012 at 10:04 Reply

    Greetings,
    I’m running iWeb 3.0.4 and have gone through you tut like a bazillion times.
    My site is on a ftp server and I have even located ALL my files into the same folders as follows…..New Mac/Users/wallzaker/Sites/flash etc. etc. etc.
    Nothing seems to be working like your tut.

    My question is the line This text will be replaced is the text section supposed to be replaced? Should it become something else or am I supposed to change it?

    My site has a lot of video on it and I would love to change them from QT to Flash.Sure could use some help or advice.
    Thanks

  16. Ed 5 December, 2012 at 23:02 Reply

    1) In preview it says it can’t find the video even though I have it directed correctly and on my server.

    2) When and if I can make it work, how can I have it auto start and loop?

  17. Paul 28 January, 2014 at 08:17 Reply

    Hi everyone! Hi Iwebunlimited !
    I have started well, confident in the clear explanations, but when it come to upload the folder to the server, it becomes very confusing… I’m with Bluehost as a hosting company, do I need to use Filezilla (which I have tried already) or should I use the c panel of the hosting company? Could you kindly explain to me the step 4 in detail?
    I thank you in advance.
    Paul

    • iwebunlimited 7 February, 2014 at 16:39 Reply

      You should probably contact your web hosting provider as they would be able to provide you with instructions on what to do.

Leave a reply

Facebook
Twitter
YouTube