A simple video player with jQuery and Flash. Double-click player to view full screen.

• Video One (loaded from remote domain)
• Video Two
• Video Three (autoplay)
• Unload the video

Installation

1. Download, unzip and upload the contents
2. Place your videos in the 'video' folder
3. Add video links to your page as described below

Configurable Settings

If you don't like the default settings, you can open the jv.js file and change the following:

• The element id of the video placeholder
• Width and height of small player
• Placeholder border colour and width
• Placeholder background colour
• Placeholder background image
• The location of the swf file (not recommended)

Adding the Video Links

The video player works by clicking on links that have the following format:

<a href="video/one.flv" class="jv_loader" rel="./thumbs/one.jpg">Play Video One</a>

The different coloured sections represent:

• the location of the video file
• the class that the plugin hooks into
• the location of the screenshot to show (gif, png or jpg)

Autoplay

To have the video play as soon as a link is clicked, simply add the autoplay class to it:

<a href="video/one.flv" class="jv_loader autoplay " rel="./thumbs/one.jpg">Play Video One</a>

Adding the Video Player Element

Add a div element with an id of "jv_player" to your page. When a link is clicked, the video will appear in its place.

<div id="jv_player">Video will appear here</div>

Unloading the Video

Add a link with a class of "jv_unloader" and the rel value set to the id of the video player element you wish to remove.

<a href="#" class="jv_unloader" rel="jv_player" >Remove the video </a>

Download

jv_player.zip (with example movies, ~1.6 MB)
jv_player_slim.zip (without movies, ~113 KB)