Use FTP? Here's the Jing Wrapper and Embed Code
Hi everyone, I'm posting this on behalf of Brooks Andrus--the guy who's behind the new Jing player. Take it away Brooks:
So here's the problem: Some people want to use Jing with their own FTP server, but they want it to function in a more sophisticated way than just throwing the h.264 MP4 file up there. Some people want their own embed code and the ability to control video behavior. Trouble is, this can become an activity that's not for the feint of heart you might say.
To make it easier to get started, I've provided the Jing player files, some sample embed code and created a "how-to" video that will show you how you can incorporate the files and custom code so Jing videos on your FTP server will act similar to Jing videos on Screencast.com.
Steps described in my video:
- Obtain the files. <-- I zipped them up here for you.
- Upload the files to your FTP server in the correct folder.
- Customize your FTP button(s) in Jing.
- Enter basic FTP information.
- Enter custom code. You can paste and modify my supplied code from the text file. (Note: the bug I refer to at the 2:00 mark only refers to Mac Jing and is now fixed.)
- Test the FTP button settings.
- Make a Jing video and give it a try!
Try watching the video in full screen mode for a better experience.

This isn't working for me. It just brings up a loading screen then doesn't proceed.
Here is a sample of what I come up with
http://trickedoutjes.us/jing/index.php?name=test.swf&autostart=true&width=550&height=400
Any help?
This isn't working for me. It just brings up a loading screen then doesn't proceed.
Here is a sample of what I come up with
http://trickedoutjes.us/jing/index.php?name=test.swf&autostart=true&width=550&height=400
Any help?
@Vin - Looks like you're trying to use the Jing Pro MPEG4-AVC solution with SWF files. Check out this post to get Jing up and running with SWF files.
http://www.brooksandrus.com/blog/2008/09/26/jing-and-ftp-a-complete-setup-guide-and-template/
Thanks. Two Questions.
Choosing to stay with SWF since most recordings are quick, short, more static screen clips. Smaller size, etc.
I've used jing for a long while just sharing the link to the vids on our FTP server as:
http://www.server.com/FILENAME.SWF
= grey box, little thumbnail of the first page, and the play button.
fantastic!
Upgrade to paid Jing Pro - and I like the "screened" look and the start to play button even more... BUT
even a small clip, a portion of the screen recorded - it launches full screen...
Question 1) do I have any control over that if I just desire to paste a direct share link to the swf w/o using the parsing code above?
example: small section of screen - swf sizes to entire page
http://files.statenewslines.com/jingcodes.swf
Question 2) what part of your swf code that you reference above (jingviewer) do I change to allow the destination page to a) NOT auto start AND show the cool "screened" look to the starting splash screen of video?
Huge fan, paid camtasia user, glad to see you are part of the team.
Very helpful post. Looking forward to your response.
So can you not use this with regular jing? Or do you NEED to have jing pro?
Ok, for those of you who are using free jing (SWF), I've created a new template that will work for you.
Download this zip:
http://www.brooksandrus.com/resources/jing_complete_template.zip
Your URL template will look something like this:
http://www.brooksandrus.com/jing2/jingswfviewer.php?name=[filename]&width=[width]&height=[height]&autostart=false
You can toggle the autostart variable to select between click-to-play and immediate playback.
If you're creating thumbnails and uploading them to your server (manual process that Jing doesn't do for you) you can add a "thumb" variable with the url to frame that will be displayed in the click-to-play start screen.
A URL template with a thumbnail would look something like this:
http://www.brooksandrus.com/jing2/jingswfviewer.php?name=[filename]&width=[width]&height=[height]&autostart=false&thumb=someimage.png
Hope that helps:
@Paul - glad to hear your liking Jing and purchased Jing Pro. The template attached here has the new look Jing videos are sporting these days.
Hi Brooks
I'm trying to set up FTP to my site, following your video demo. I click the new FTP button and I see the growl(ish?) message:
"Uploading to FTP. Preparing upload..."
Sometimes I see the progress bar get to around 2.05K of 55K, but no further. Sometimes I see no progress.
I then get the message:
"The embed code for your capture is ready to be pasted", but I can see in my FTP app that the file has not been uploaded.
I then tried an old (pre-Pro) 77K image from my History, and after clicking FTP I got the message:
"POSIX error: Connection reset by peer. (null). Your capture was not shared but is in your History."
Lastly I tried an old pre-Pro swf 300K swf file. It seemed to mostly upload, and gave me the 'embed code', but the file is not uploading.
Any thoughts and/or advice?
Thanks,
-Joel
p.s. You might want to update your index.php file to use long open tags instead of short ones (
I see my P.S. got cut off because of the tags I used in my comment. I meant '
d'Oh! Nevermind! -- so much for this site's comment Preview button ;-)
@Joel - Hmm, I'm not sure what's going on. When you hit the "test connection" button did it say it was successful? Oh and sorry bout that PHP...not my strong suit by any stretch. Feel free to send me some pointers. ;-)
You could also try throwing a jing screencast.com link at us to show the button configuration and faulty behavior.
Agreed that the commenting preview and mandatory Captcha (every time I comment--for realz??) blows.
Hi Brooks,
I've successfully used your Jing Player files for mp4 files.
It plays nicely.
However, the video starts immediately even though I've included "&autostart=false" in the URL.
What might cause this to happen ?
Thanks,
Howard
@Howard - sounds like I'm not checking the query string in the mp4 php page. Let me modify it and give you a link to a new file.
@Howard - I don't have access to the blog site, so you'll have to download the updated php file from here:
http://www.brooksandrus.com/resources/jingpro_ftp_template.zip
Brooks,
The new .php file does the trick.
Great! Thanks for all your work and help.
Here's my brief test:
http://www.xmission.com/~howardm/Jing/index.php?name=Test.mp4&width=665&height=601&autostart=false
Howard
Please anybody help me i bought it i got the email confirmation and i still can record more of 5 minutes....its getting frustrating.. below my order number:
1091209
Great tutorial Brooks!
Is it possible to get a sample embed code for using this in a static HTML page, rather than dynamic PHP. I just want to circumvent the FTP upload, and embed this in my own website page directly.
Thanks!
iBrent
Hi Brooks
You were right that the problem had to do with my directory. I needed to use www/httpdocs/jing. Now all's working well, thanks so much!
As to the PHP, if you add the letters php immediately after the 3 times that use the less-than character + question-mark -- starting your PHP code -- then it's more likely to work universally (e.g. PHP 5)
Best,
-Joel
Hey everybody, I've gotten my act together and merged the php templates so that a single php file can serve both MPEG4-AVC and SWF files (also using long opening php tags). As an added bonus the when you view source on the rendered page in the browser it's now formatted nicely (pretty print).
So the zip (linked below) now includes the following files:
- expressInstall.swf
- index.php
- jingloader.swf
- overlayplayer.swf
- swfobject.js
- jing_ftp_settings.txt
Everything except for the txt file gets uploaded to your server.
The txt file gives examples of the ftp server settings I use on my own site. It also provides a URL (link) template and embed code templates for MPEG4-AVC and SWF playback in Flash Player.
Please let me know if there are issues and feel free to provide improvements (it would be great to have an ASP.NET / JSP / Python / Ruby, etc template).
Download files here:
http://www.brooksandrus.com/resources/jingpro_ftp_template.zip
Oh yah, the php template support PNG embedding as well (it really is a lot closer to a "complete" ftp toolkit).
Hi Brooks,
I uploaded these files to my FTP server. The upload procedds O.K., and I get a URL from my Clipboard.
But I cannot view the .swf or .mp4 files in Firefox or Internet Explorer.
In Firefox, I keep getting a message about needing a Flash player even though I have the latest version.
In I.E., nothing plays after a rectangle (of the appropriate pixel dimensions) appears on my display.
Brooks,
More information :
When trying Safari, I get an error message telling me to look at the Activity Window.
Here's a screenshot of it, superimposed on the contents of my Jing folder :
http://screencast.com/t/egdE6EKkgl
Howard
@Howard - it looks like jingloader.swf doesn't exist in the same directory as Test.swf (I get a 404 error when I try to hit jingloader.swf directly, but I can hit Test.swf when I ping your server). Try re-uploading jingloader.swf to your Jing folder, clear your cache and try sharing again. If its still not working I'll send you another jingloader.swf (maybe it was corrupted) and we'll try again.
Brooks,
I downloaded the jingpro_ftp_template.zip again, and uploaded the jingloader.swf file again.
I emptied my browser's cache.
I get the same "error" messages I mentioned before.
The jingloader.swf file is there. See this screenshot:
http://screencast.com/t/pl4AYGbx
Howard
@Howard - looks like overlayplayer.swf and jingloader.swf are not completely uploading to your server. Here's what I see when I try to hit some files on your server:
http://screencast.com/t/1wZxzj68p
Try deleting both of those files and then uploading each file one at a time.
If you can get those files to show up (i.e. you can hit them directly) then everything should be good to go.
Hi Brooks,
Here's more information:
1. I confirm that the files exist in the Folder "Jing"
2. My ISP technical support person confirms that they are there.
3. He is able to play the video, but it does not play when he includes the "index.php" in the URL. He also gets a message about a "missing" Flash Player.
4. He thinks this may all relate to a "file permissions" issue, which I know nothing about.
I was able to use Jing to upload/play videos from this server before I upgraded to the latest files you made available.
Cheers,
Howard
@Howard - ISPs explanation doesn't seem to make a lot of sense since I can't access the jingloader.swf / overlayplayer.swf on your site, but I can access the other files.
I just explicitly made sure the file permissions were R W access, rezipped the files and uploaded them. Try downloading them again and then look at the sharing / permissions of the files in Finder before uploading again.
Apologies for the issues - worst case you can roll back to the old files. :-(
Summary
This works : http://screencast.com/t/swhmyFQ6
This doesn't work : http://screencast.com/t/LfvOEKVzyn
Howard
Hi again Brooks
Your new combined php file is great, thanks.
I've just had to update my Jing, and now using the FTP button no longer places my link into my clipboard. I only get the message: "Your capture has been successfully uploaded." (The file does indeed get uploaded, but no link to paste, with width & height)
Any thoughts?
Thanks,
-Joel
@Joel - I'm guessing that the Mac Jing update fixed the bug where the "video" tag template field was ignored (I believe in my video I was showing people how to hijack the "image" field). So, I'd try moving the URL template from the "image" field to the "video" field in the FTP sharing properties.
@Joel - I'm guessing that the Mac Jing update fixed the bug where the "video" tag template field was ignored (I believe in my video I was showing people how to hijack the "image" field). So, I'd try moving the URL template from the "image" field to the "video" field in the FTP sharing properties.
Note: commenting seems somewhat broken (I posted this earlier, but it hasn't shown up), so apologies if this turns into a double post.
Hi,
Can you post the custom code, the part after the index.php?
Thanks
@Wade - here's what my URL template looks like:
http://www.brooksandrus.com/jing2/index.php?name=[filename]&width=[width]&height=[height]&autostart=true
Thanks but it doesn't work for videos. What I want it to do is copy the link the the clipboard so I can send the link and people can watch my videos.
I can't believe this is so difficult to get the support information correct on this.
@Wade - what platform are you on? Would you mind sending me some info about your configuration and server (a jing that shows your server and your jing configuration settings would be helpful).
I use this template with my own server, so I know it works (we've successfully tested with other servers at work as well). That said it can definitely be tough for the uninitiated to get their server configured. Most of the issues that I see people run into have to do with how the correct url paths. One experiment I do is trying to link directly to a specific piece of media (a swf or mp4). Once I can do that its easy to deduce what the url path should be for your link template.
You are welcome to take this offline and send me a direct email via:
brooks dot andrus at gmail dot com.
Thanks for the instructional video. I still need to upgrade to jing pro. I am waiting to get my new computer, because my current laptop isn't quick enough. Anyway, thanks a bunch for the tutorial. Great content. Have a great day!
-Tim Davis
I noticed that if the embedded video doesn't fit in the available browser space, the browser does not provide scrollbars. So if your browser window isn't big enough for the video there is no way to scroll down to move the playback controls.
I would like there to be a scrollbar in a situation like this.
I fixed this (no scrollbars showing when video frame was too tall for browser window) by changing the overflow property in the style definition from hidden to auto:
FROM
body { text-align: center; background-color:#000; margin:0; padding:0; overflow:hidden; color:#FFF }TO
body { text-align: center; background-color:#000; margin:0; padding:0; overflow:auto; color:#FFF }Is there a reason I shouldn't have done this? Did I break something else?
@Tim - good catch. I generally try avoid making and embedding my screencasts at very large dimensions (I max out at 720p), so the scrollbars was just an oversight. Thanks for posting your fix for others.
You might also want to upload the link in the original post from:
http://blog.jingproject.com/BrooksPlayer/jingpro_ftp_template.zip
to the newer code you posted later:
http://www.brooksandrus.com/resources/jingpro_ftp_template.zip
( http://blog.jingproject.com/2009/01/use-ftp-heres-some-embed-code.html#comment-444163 )
Second attempt, I hate these type what you see thingies!
Now what dis I say before? Oh yes, you make it look like a very easy task to set up FTP and we shall see whn I get my hands on the files.
Jing is an excellent tool and very easy to master tool. Makes me wonder why I play with Camtasia Studio and get regularly mislaid on the way too.
Today people are far from content to just read the information you wish to pass on. With each generation getting more and more accustomed to seeing everything appear on either a Computer or TV screen they expect more than lifeless words now. So we have to master a whole new skills set just to get our thoughts passed on to others.
With Jing the learning curve is far less steep as it is so simple and you must be congratulated on the sophistication you have passed on within what is essentially a free to use product.
Oh well off to download ans set up the FTP now just to check out how simple it really is!
Thanks again
Norman
Very nice work!
Anyone know how to edit the replay button shown at end of video play?
Thanks,
Jim
Note, that the code offered here is not secure! There is a high risk of CSRF (cross site request forgeries) when using this. If you have something other than files on the domain then there is a high risk of usernames or some other high priority data to be spyed out.
If you want to use this on a production website, take care to escape alle parameters with html_special_chars()!
Amazing.I'm going to reference this in my thesis. If you have any problem with this, please let me know.
A very good blog by you. I've decided now to come back regularly. Get the Blog Share in any case.
vg
Mirko
Is there a way to do this without flash? So that iOS systems can run the MP4 video?
@ Dean If you host on Screencast.com, we default to an HTML 5 player and your MP4 videos can work on iDevices.
There is some fine print like you have to have certain dimensions and encode levels. See: http://www.screencast.com/help/tutorial.aspx?id=495