How to Overlay Video Using JQuery Tools and Flowplayer

lorenz — Sat, 13 Feb 2010 10:07:57 +0000

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

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

Include the jquery.tools.min.js with in the HEAD section of your HTML

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

HTML


        
            
        
        
            PMDG Virtual Cockpit
            00:27

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


   
      
         
      
      
          PMDG Virtual Cockpit
          00:27
       
   

   



   
       
          
       
       
            PMDG Virtual Cockpit - Dark
            02:38

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

How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)

lorenz — Thu, 28 Jan 2010 18:47:02 +0000

Flowplayer is a free video player for the web that is used to embed video streamson a web page. Flowplayer is highly skinnable and extendable. You can customize it’s look and feel and also extend it’s functionality using available plugins. If you are an expert in JavaScript or ActionScript programming, you can even create your own plugins according to your needs. There are two types of Flowplayer’s plugin, the JavaScript plugin that works outside the player and Flash plugin that works inside the player.

Flowplayer

Flowplayer is released in two versions:

Open source (free) version (released under the GPL license). In this version, the Flowplayer branding (logo) is always visible on the player, you can’t remove the logo.
Commercial version. In this version you can remove the Flowplayer logo and place your own logo on the video.

Current version of the time of this writting is version 3.1.5 which can be downloaded here.

Browser Compatibility
Flowplayer API and JavaScript plugins are dependent on JavaScript 1.5 which is supported by following browsers:

Internet Explorer 6.0+
Firefox FF 2+
Safari 2.0+
Opera 2.0+

Supported Flash Player: 9.0+

Supported video formats
Currently Flowplayer support three video formats:

Flv
H.264
Mp4

Using Flowplayer

Download and install Flowplayer

Download the free version of Flowplayer (flowplayer-3.5.1.zip (161.2 kB))
Extract and copy flowplayer-3.1.5.swf and flowplayer-3.1.4.min.js into your web application directory
Include the flowplayer-3.1.4.min.js in the HEAD section of your HTML file

Setup Video Container

To use Flowplayer, you have to setup a HTML element as a video container on your page. The element can be any HTML tag, but the most commonly used tags are anchor (A) and DIV.

Install Flowplayer

View live demo

2. Multiple Player

View live demo

4. Using Clips

Clips represent movies to play in Flowplayer. Clips can also be provided as a Playlist with a series of clips that will be played in sequence. Clip and Playlist are objects of Player.

On the example above, we use DIV tag as video container. By using DIV, we can’t define the video url using href like in our previous examples that using A tag. The video url is defined within Clip object and we also set the autoPlay to false that indicating the player should not start playback immediately upon loading.

View live demo

Download Example Source Code

All About Web & Mobile Application Development » flash video player

How to Overlay Video Using JQuery Tools and Flowplayer

How to Use Flowplayer as Your Web Video Player (Beginner’s Guide)