In my previous tutorial, i’ve explained the basic usage of Flowplayer as your web video player. In this tutorial, i’ll will show you a little bit advanced usage of Flowplayer combined with Jquery Tools. JqueryTools is used to overlay video with a simple apple effect. This feature is usefull when making a video gallery, where users directly play a video in larger size in an overlay mode without having to move to a new page.

How to Setup
Flowplayer
Follow the instructions in my previous tutorial to setup Flowplayer
JQuery Tools
- Download Overlay component from Jquery Tools download’s page and save it as jquery.tools.min.js. You can download it with jQuery (v1.3.2) as a single file (20.82 kb) or as a separated file (1.59 kb) if you already have jQuery.
- Include the jquery.tools.min.js with in the HEAD section of your HTML

<script src="scripts/jquery.tools.min.js" type="text/javascript"></script> <script src="scripts/flowplayer-3.1.4.js" type="text/javascript"></script>
or
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.tools.min.js" type="text/javascript"></script> <script src="scripts/flowplayer-3.1.4.js" type="text/javascript"></script>
How to Use
To overlay a video, use two div containers, one is for displaying video information (title and duration) and a splash image as a video’s thumbnail and the second is for overlaying the video. To get thumbnail and duration of a video, you can use mplayer tool as explained here.
Overlay Single Video Player

HTML
<div class="video" style="background-image:url(images/splash_01.jpg)"> <a href="#" rel="#orel"> <img src="images/play.png" alt="play" title="play" border="0"> </a> <div class="info"> PMDG Virtual Cockpit <span>00:27</span> </div> </div> <div id="orel" class="overlay"><a href="video/video01.flv" id="player"></a></div>
line 01: container for video information, splash image, play button, and video title and duration.
line 02: trigger button (play button), the button image is inside the a tag that has rel tag (orel) that match with the video overlay container’s id (line 11)
line 11: container for video overlay
CSS
div.overlay { z-index:9999; padding:40px; width:476px; display:none; background-image:url(../images/gray.png); } div.overlay div.close { background:url(../images/close.png) no-repeat; position:absolute; top:2px; right:5px; width:35px; height:35px; cursor:pointer; } div.overlay a { height:370px; display:block; } div.video { height:150px; width:200px; border:2px solid #fff; outline:1px solid #ccc; -moz-outline-radius:4px; cursor:pointer; text-align:center; float:left; margin:5px; } div.video img { margin-top:50px; } div.video div.info { height:40px; background:#000 url(../images/h80.png) repeat-x; opacity:0.7; color:#fff; margin-top:2px; text-align:left; padding:5px 5px; font-family:"bitstream vera sans","trebuchet ms"; font-size:11px; border-top:1px solid #ccc; } div.video div.info span { color:#99FF99; display:block; }
The CSS style definition for vide overlay
JavaScript
$(function() { var player = $f("player", "swf/flowplayer-3.1.5.swf"); $('a[rel]').overlay({ expose: '#111', effect: 'apple', onLoad: function() { player.load(); }, onClose: function() { player.unload(); } }); });
line 02: install flowplayer into it’s container
line 04: the overlay function, fired when user clicks on play button
line 05: expose color
line 06: overlay effect
line 08: load the player
line 12: unload the player when user clicks on close button
Overlay Multiple Player

<div style="float:left"> <div class="video" style="background-image:url(images/splash_01.jpg)"> <a href="#" rel="#orel1"> <img src="images/play.png" alt="play" title="play" border="0"> </a> <div class="info"> PMDG Virtual Cockpit <span>00:27</span> </div> </div> <div id="orel1" class="overlay"><a href="video/video01.flv" class="player"></a></div> </div> <div style="float:left"> <div class="video" style="background-image:url(images/splash_02.jpg)"> <a href="#" rel="#orel2"> <img src="images/play.png" alt="play" title="play" border="0"> </a> <div class="info"> PMDG Virtual Cockpit - Dark <span>02:38</span> </div> </div> <div id="orel2" class="overlay"><a href="video/video02.flv" class="player"></a></div> </div>
line 01: container for video 1
line 03: rel tag must have a unique value for each video (orel1 & orel2 for the two videos)
line 12: overlay container, it’s id must match the rel tag in line 03
line 15: container for video 2
CSS
Look at example 1
JavaScript
$(function() { $("a[rel]").overlay ({ effect: 'apple', expose: '#111', onLoad: function(content) { this.getOverlay().find("a.player").flowplayer(0).load(); }, onClose: function(content) { $f().unload(); } }); $("a.player").flowplayer("swf/flowplayer-3.1.5.swf"); });
line 07: load video, overlay function looks for a element with player class name within it’s container to load the video
line 11: unload video
line 15: install flowplayer







Thanks for the effort you took to expand upon this post so thoroughly. I look forward to future posts.
There are various sea vessels involved in shipping to guyana. It may include box boats or container ships, bulk carriers, tankers, ferries, cable layers, dredgers and barges.
Cannot working, why …??? I Have try to download script…video cannot running
Does the video file exist ?
Good check list, I am running through it with my sites now .
Can it be run on page load ?
I want to run overlay video player automatically when the page load.
Thanks
Seems it doesn’t work with IE. The overlay is there but can’t play the video. Any idea??
Very nice and detailed tutorial, sample source code works fine as well. Thanks!
the multi overlay having problem with IE. the first video have no problem to close but if you click 2nd or 3rd video and close it halfway, you will find that it is playing backend — no video but audio continue to play.
For two or more videos in IE:
$f().unload();
change by:
this.getOverlay().find(“a.player”).flowplayer(0).unload();
works for me!
SO, is there a way to the video start playing on the pageload without clicking the play button?
Furthermore, once you satisfy the representatives be sure to apparent all the fears regarding the travelling process. You will observe the pictures photos on the various rapace. [url=http://www.coachtokka.com/]コーチ アウトレット[/url],Never curb your options to remain many options on your hand. Once you have based many options and their estimates spend some time to these people.[url=http://www.coachtokka.com/]コーチ バッグ[/url], Study each small detail and you will locate many important factors. Compare just what different services do you have inside the various packages. Certainly the various companies have different packages to offer.
You have to take good care that you select that certain which matches your financial budget and acts the needs you have. All these services are considered the greatest transportation mode nowadays. Whilst comparing take good care you thoroughly research the various businesses. [url=http://www.coachtokka.com/]コーチ財布[/url],Certainly what will matter most for you will be the vehicle fast and the providers. [url=http://www.coachtokka.com/]コーチ バッグ 新作[/url],Make sure that the drivers and operators are the certified and have allow to drive in the region in which you are intending to get.
Make certain all the operators are commercial certified and have been subject to the necessary exercising modules of the traveling. There is also healed drug make sure have thoroughly clean background. They need to contain the important stateoftheart technology within them.[url=http://www.coachtokka.com/]コーチ メンズ バッグ[/url], Various discounts and consumer oriented packages are offered to trustworthy and regular clients. After evaluating the various selections and have gotten the quotation, you need to sign the offer. Typically there are not any contracts and you could easily avail all of the services. These firms also show you concerning the various basics which will demonstrate quite useful whilst your traveling. [url=http://www.coachtokka.com/]www.coachtokka.com[/url] コーチ アウトレット,They could be recycled on a transportation services, but information regarding your remain and also refreshment. Likewise, look precisely what all payment possibilities you have as well as whether you have to spend in one fell swoop or you can spend in repayments. Undoubtedly it may well require a little effort, however your experience may be the most unique one invest the all the above actions.
How can I make normal textlinks? maybe in a list?
Hi Your JQuery Tools using information and download method useful for me…and basic usage of player information very nice…Thanks for sharing…