iWeb Tip #9 – Flash Video in iWeb (JW Player)
I’ve had many request asking for a tip on how to get flash video into iWeb. There are many different ways, but this tutorial is going to show you how to do it with Longtail Video’s JW Player, which is the number one open source media player. The reason we use flash video is because it’s most compatible with all computers Mac’s and PCs and if your wanting to reach an audience like that it’s the best outlet next to QuickTime and Windows Media Video. JW player is pretty flexible to customize, but we’re going to make this as simple as possible for you, so here we go:
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
- Our .flv flash video we converted in step one
- player.swf file
- 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
- Flash Video (our .flv video we converted in step one)
- “player.swf” (file we downloaded in step 2)
- “swfobject.js” (file we downloaded in step3)
- 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
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.
Great! well I got the video working perfectly using instructions above, however I want to customise the player removing control bar and using auto start but when I use the JW player customiser I have problems with the code as its not like the one above at all ….? how can the code above be adapted to customise.
Thanks
I can’t get this to work at all. Any thoughts?
how to make the flash autostart and loop? tks
This is very helpful but I have not been successful embedding Flash files onto my website. Step 5 is what confuses me. I pulbish iweb to a folder then use Fetch to put it on a server at GoDaddy. I am not certain what I should put in for the link address: “http://web.me.com/yourusername/flash/swfobject.js”. I’ve tried:http://mediaeyemedia.com/pdonah1/flash but it doesn’t work properly. Any help you could provide would be greatly appreciated.
I am also not sure what to enter to get the snippet to point to my files. I have tried every possible combination and am now exasperated. If we don’t use a mobile me account, it would be a great help if we could see how to format the code to point to another type of server. I’m not a code guy, but this will be great once I unlock the secret,
Thanks
Hello
A question. I’m working on a website for a friend. Is it possible to stream RTMP code in iWeb 09 to install? If so you could give me even one example?
Thank you
Dirk from Germany
Is there a way to loop? I’ve been trying to add this command, but seem to fail. Please recommend!
Thanks
Love this site!!!
Hey there. I quickly read the post and also feel that the advice you may have discussed is simply superb and it has to be a disgrace to not let you know. Kind Regards, Samuel
Hello,
I’ve followed your procedure to have Flash Video Player on my Website. I’ve done every step as explained but when I clic on apply in iWeb after inserting the widget HTML and changing the information in red I get this box with this written in it : The Text Will Be Replace. I notice that in the code we see this line? Now I’m pretty sure that I’ve written the code okay, here it is :
This text will be replaced
var so = new SWFObject(‘http://web.me.com/gardouche/flash/player.swf’,’mpl’,’480′,’320′,’9′);
so.addParam(‘allowscriptaccess’,’always’);
so.addParam(‘allowfullscreen’,’true’);
so.addParam(‘flashvars’,’&file=http://web.me.com/gardouche/flash/InterviewYouTube2009.flv&image=http://web.me.com/gardouche/flash/YouTubeInterview.jpg&stretching=none’);
so.write(‘player’);
Can anyone tell me what the problem is?
Thank you for your help!
Guylaine
Great site, great info!!!! the main info box on your homepage, (with three options) is that flash, frames or something else?
It’s a jquery slider, similar to my tip on Image Sliders in iWeb
Thanks
to make loop and auto start replace use this:
so.addParam(‘flashvars’,’&file=http://web.me.com/yourusername/flash/sample.flv&autostart=true&repeat=always&stretching=none’);
:)
Am i right in saying you used blip.tv for your videos. If so could you please show us how to use it in iweb?
Thanks
Hello,
I’m trying to determine why when I add a link to my google+ video (made using picasa) to my iWeb blog, it always gives me the message “An Error Occurred, Please Try Again” when trying to view the video. But if you access the video normally (not through the link on the blog), it plays just fine.
Any ideas?
Thanks,
Julie H.
This used to work like a charm when I was hosting through mobile me. But now I’m using fetch to upload to godaddy and it no longer works. I’ve copied and pasted the code above and changed the mobile me address to my godaddy address but I get “text will be replaced”. I know my files are in the right place b/c when I put that address into the browser, it starts downloading the flash file. Again, worked great on mobile me. Since mobile me is gone, can’t get it to work on GoDaddy.