• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Java Script >> How to Overlay Video Using JQuery Tools and Flowplayer

How to Overlay Video Using JQuery Tools and Flowplayer

February 13, 2010 by Lorensius Londa 14 Comments

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

Download Example Source Code
Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

  1. How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)
  2. Prototype: Using Ajax.Updater to Update Browser’s DOM Element
  3. How to Create Image Overlay Using Javascript
  4. How to Crop Image Using JavaScript and PHP

Filed Under: Featured Articles, Java Script, Programming Tagged With: flash video, flash video player, javascript, jquery, overlay video, overlay video flowplayer, overlay video javascript, overlay video jquery, web video player

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Comments

  1. Stefany Bernard says

    July 1, 2010 at 7:48 pm

    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.

    Reply
  2. indra says

    July 25, 2010 at 6:33 pm

    Cannot working, why …??? I Have try to download script…video cannot running

    Reply
    • lorenz says

      July 26, 2010 at 7:31 am

      Does the video file exist ?

      Reply
  3. ghd straightener says

    October 22, 2010 at 4:41 pm

    Good check list, I am running through it with my sites now .

    Reply
  4. D Mandal says

    November 3, 2010 at 6:14 pm

    Can it be run on page load ?
    I want to run overlay video player automatically when the page load.
    Thanks

    Reply
  5. Aumss says

    November 5, 2010 at 12:57 pm

    Seems it doesn’t work with IE. The overlay is there but can’t play the video. Any idea??

    Reply
  6. Ryan says

    November 23, 2010 at 2:04 pm

    Very nice and detailed tutorial, sample source code works fine as well. Thanks!

    Reply
  7. williams says

    July 25, 2012 at 5:08 pm

    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.

    Reply
    • Fernando says

      November 28, 2012 at 9:25 pm

      For two or more videos in IE:

      $f().unload();

      change by:

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

      works for me!

      Reply
  8. Pietro says

    September 19, 2012 at 9:53 pm

    SO, is there a way to the video start playing on the pageload without clicking the play button?

    Reply
  9. AnydayKercync says

    May 17, 2013 at 4:26 pm

    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.

    Reply
  10. Andreas Sokol says

    October 25, 2013 at 9:13 pm

    How can I make normal textlinks? maybe in a list?

    Reply
  11. Robert says

    December 12, 2013 at 2:23 pm

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

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in