Add ScreenFlows to your WordPress blog with Flowplayer
By Craig Burgess
Ever wanted to post your ScreenFlow screencasts to your WordPress blog? This post will show you how, and it’s pretty simple.
I adapted this post from a reply I made to Bill at thefayettevillelife.com/ who was frustrated with trying to get his screencasts into WordPress. I’ve expanded it a little to show how to upload (with a special free plugin) your videos to a certain path so you can reference them in your post.
Here’s how to use Flowplayer.org’s free player for embedding videos, including FLVs and MOVs.
WITH FTP SOFTWARE
1. Go to http://wordpress.org/extend/plugins/word-press-flow-player/installation/ and download the plugin for Flowplayer by Saiweb, or do a search for “Flowplayer for WordPress” from your Plugins dashboard (Add New).
2. Once the plugin is installed, upload your video to a folder so you know where it lives on your server, like this: http://domain.com/videos/video1.mov
(You probably have a favorite free FTP client, but mine is Filezilla – http://filezilla-project.org/)
3. The WP plugin page above also has instructions for doing the embed via your Post dashboard. But it’s really simple. Just copy and paste this code and change the information. You can use either use the visual editor or the HTML editor in WordPress.
Here’s what it should look like:
[FLOWPLAYER=http://domain.com/videos/video1.mov,640,360]
As you can see, it just lists the absolute path to the video, plus size information. This tells the player what size and aspect ratio to make your video.
If you want to put in a custom splash image for all videos, or unique to each, just call the image you want and separate it from the video by a pipe (shift backslash). The image has to be first to show up prior to the video, like this:
[FLOWPLAYER=http://domain.com/videos/splash.jpg|http://domain.com /videos/video1.mov,640,360]
TIP: In order for the splash image to look and fit correctly, make it the same size as your videos, i.e., 640×480, 720×540, etc., and make it a JPG file.
WITH FTP PLUGIN – WP EASY UPLOADER
Follow the same steps as above, except instead of using Filezilla or another FTP client, which you might not have the right permissions to use (or just don’t want to), we’re going to use a free plugin to put the videos where you want them.
WP Easy Uploader
1. Go to your dashboard, do a search for “WP Easy Uploader” from your Plugins dashboard (again, click on Add New).
2. Once you have that installed, go to Tools > Upload Files link
3. Select Manual Path, and put the name of the folder you want the files to be uploaded to, like Videos (click for full screen shot)
4. Browse your system for the file, go to the bottom and click the Upload button. When it’s complete, it will give you a nice confirmation and the absolute path to use in your video code, as shown above. Just copy and paste the path to replace the sample code I have shown.
5. Test it to make sure all is good and you’re golden!
Congratulations, you’ve just uploaded a video via FTP to your WordPress site!
You can see and example of Flowplayer in action on our Wirecast blog, with Craig Seeman’s post on using Skype and Wirecast together.
LINKS:
http://flowplayer.org/
http://www.saiweb.co.uk/wordpress-flowplayer
http://chrisjean.com/wordpress-plugins/wp-easy-uploader/
Telestream Forum post on adding video, good discussion:
http://forum.telestream.net/forum/messageview.aspx?catid=42&threadid=5893
Good luck!
- Craig
11 Responses to “Add ScreenFlows to your WordPress blog with Flowplayer”
August 29th, 2010 at: 3:42 am
This is the best blog post I’ve EVER red about embedding flash video to a blog. Honestly.
I did what you said. I wasn’t sure first where to upload the flowplayer files in the server (some steps are still new for me) but I cretaed a new folder in FTP called Flowplayer in my wp-content file and uploaded those 3 flowplayer files into that.
I needed to export the iMovie project first to the computere until I was able to upload it to the server with wp-easy uploader. I saved the path.
When it was time to put the code/path to the post I couldn’t believe my eyes.
I NOW HAD A FLASH VIDEO ON MY BLOG PAGE !!
Wahooo !! I’m the happiest person in the world.
Thank you thank you!!
This has really been a major problem for me a long time. I have become so confused at the installation pages and plugin information.
But now it’s done.
I’m happy.
Super thanks for the post and also great links!
[Reply]
Craig Reply:
August 30th, 2010 at 8:49 am
Irinla,
Thank you for your kind comments. It is pretty amazing that something like video embedding in a blog can be so frustrating, but can be solved by a couple of free plugins, a player and some of your time!
I’m so glad you found it useful!
Best,
Craig.
[Reply]
August 30th, 2010 at: 8:53 am
What about Google’s Blogger? Is there plug-in to include ScreenFlow, or is it best to simply save to YouTube, then embed that code?
[Reply]
Craig Burgess Reply:
September 1st, 2010 at 9:58 am
Hi Joseph,
Yes, it’s best to use Youtube and follow one of these tutorials to embed ScreenFlow’s into Blogger.
http://bit.ly/bcKPX0
You might mention that on the Feature Requests page (link on top of page) for future releases!
Best,
Craig.
[Reply]
February 17th, 2011 at: 1:07 pm
Hi Craig,
Please try not to laugh out loud too loudly, but how do I install FlowPlayer after I have downloaded it to my Mac?
Thanks.
John
[Reply]
Lynn Elliott Reply:
February 17th, 2011 at 1:14 pm
I can try to answer that John. I actually find it easier to search for and install plug-ins from within WordPress. So if you go to your Add New Plugin menu in your WordPress interface you can search for “Flowplayer for WordPress”. Then simply click “Install Now” :)
Maybe Craig can answer if you want to install and import it into WordPress, but that’s the only way I know how to install plugins.
Hope that helps.
[Reply]
April 18th, 2011 at: 12:29 pm
Thanks for this!
I’m launching a new program and will be using a bunch of short 10-15 minute screencasts as my main teaching tool. Being a non-techy, can you help me with this?
1. If I have about 25-30 short screencasts, can I publish them easily via FlowPlayer and not totally bog down my system? Meaning, will it take forever for people to be able to load the videos since there are so many and they will all be hosted on my site?
2. Are there any advantages to using YouTube instead of FlowPlayer? My content is private and membership based, which is why I thought it best to go with FlowPlayer. But I don’t know enough to know if that’s even true.
Any help you could provide would be greatly appreciated.
Thanks!
Stephanie
[Reply]
Lynn Elliott Reply:
April 18th, 2011 at 2:16 pm
Hi Stephanie,
In answer to your first question: It depends on your servers or hosting plan. Video is bandwidth intensive, and if you are short on bandwidth, your users could experience delays, or your system could get bogged down.
Which leads me to the 2nd question: One advantage of using YouTube to host your videos is that it offloads that demand onto the YouTube servers, rather than bogging down your own system. With YouTube, you may not get as much privacy control as you would like though. You can tag your YouTube videos as “private”, and share the URLs with only your users, but those videos are not password protected, and anyone that comes across your URL could watch your video.
There are other video hosting sites out there that may give you more privacy options. A few that come to mind are Amazon S3 and Wistia.
Hope that helps.
[Reply]
craig Reply:
April 18th, 2011 at 3:46 pm
Hi Stephanie,
To throw in my .02 cents, I’d suggest googling for “paywall video hosting service”. When I did that, I came across these links, which could be very helpful (your results may vary):
1. http://bit.ly/i6aqsJ – Ooyala.com
2. ReelSEO – http://www.reelseo.com/video-marketing-basics-5-distribution/ – Pt 5 of Online Video Marketing Basics
Hope that helps!
-Craig.
[Reply]
June 7th, 2011 at: 9:27 am
I dont know what I’m doung wrong here, but I dont see my video when using this method at all :-(
I can see the video if I browse to the url directly but trying to embed it using the flowpayer ust gives me a blank space.
Any ideas what might be doing this and how to fix?
Thanks.
[Reply]
June 13th, 2011 at: 9:44 am
Hi Kevin,
I have a couple of ideas on this. One problem might be the version of your WordPress installation. Is it running the current version (v3.1.3 right now)? Does your version of the plugin support the latest WP version? I’d run the updates if you haven’t already. (I just embedded a video using this same method on our Wirecast blog)
But I’d say incorrect paths in the code is the most likely culprit. If you like, you can reply with your paths and I can double check it for you :-)
Best,
Craig.
[Reply]
Leave a Reply