Put a splash image before your video

In the prior post we showed you how to get video onto S3 and onto your webpage using free tools in under 5 minutes.  That was so fast, we didn’t cover a great feature that gets more clicks on your video.

With and without splash image, which would you rather click on?

To show an image before your video loads (aka a splash image)  is great to get more clicks by helping users know what the video is about, the result is more people will click to watch the video and that is the point of putting them up on the web in the first place!  The alternative is a rather unattractive black box.

Of the various free media players, there is several that support splash images. Note this is built into a few different media players, but the following code only works with  FlowPlayer (an open source and free player), which we covered in the first episode.

FlowPlayer makes adding images in front easy..it actually supports whole playlists in it’s configuration!, basically a splash image will be just a playlist of 2 items,  the splash image and then your video.  The first will autoplay, the second will not, so it will pause on the image.  FlowControl has a nice fade effect to add polish.

If you’re using wordpress formatting it with the Visual Editor, can make it slightly finicky, your best bet is to copy the code below (stripped of whitespace) update it with the values you need and paste it instead where the 2nd “<script” block begins.  If you’re doing a normal webpage this step is optional.

<script language=”JavaScript”>flowplayer(“player”, “YOUR_PATH_TO_FLOWPLAYER_SWF”, {playlist:[{url:"YOUR_IMAGE_URL", scaling:"orig",autoPlay: true},{url:"YOUR_VIDEO_URL",autoPlay:false}]});</script

To Get an splash image here are a few options.

1. Use any image you have lying around…I like ones of dead relatives, they always get attention.
2. Create a title slide using PowerPoint, or a simple text editor and
3. Open up your video in a media player and capture a frame from it using a screen capture utility (built in to most Operating System with the “prt sc” button.
4. Create it from scratch to be all fancy pants.

TIPS

It’s a good idea to get your splash image like your video on the CDN,to keep it from clogging up your webserver.

To be safe, once up on the CDN, test the url to the image in the browser directly (to make sure the ACL is setup) then try it in the playlist.

If it doesn’t work in wordpress, create a simple text file and paste the flowplayer embed code into it ,save that text file as *.html, and test that in a browser till that’s working.  Then strip out any unnecessary whitespace to put it into the wordpress blog.

Save that working code into a place you won’t forget, odds are you’ll use it over and over again…especially if your successful.

Coming soon, what CDN’s are, the pros and cons of S3 as a video provider, higher end alteratives. Be sure to subscribe to hear about those and future episodes.