How to Overlay Video Using JQuery Tools and Flowplayer

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.

Overlay Video

Overlay Video

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.
  • Download Overlay Component

    Download Overlay Component

  • 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

View Demo

View Demo

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

View Demo

View Demo

<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

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Comments

  1. says

    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.

  2. williams says

    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.

    • Fernando says

      For two or more videos in IE:

      $f().unload();

      change by:

      this.getOverlay().find(“a.player”).flowplayer(0).unload();

      works for me!

  3. says

    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.

  4. says

    Hi Your JQuery Tools using information and download method useful for me…and basic usage of player information very nice…Thanks for sharing…

Leave a Reply

Your email address will not be published. Required fields are marked *