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

<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

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

<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

Figure below shows a scrollable image slider featuring four thumbnails per slide. To display thumbnails from another slide, simply by clicking the navigation buttons located on the right and left slide. Slides can also be scrolled automatically by using the  left and right arrow keyboard or using  the mouse wheel.

Scrollable image slider

In this tutorial, i’ll use Scrollable component from jQuery Tools user interface (UI) library which is based on popular jQuery javascript framework. Current version of jQuery Tools at the time of this writing is version 1.1.2, which can be downloaded here. The library itself consists of six user interface components that can be easily combined:  Tabs, Tooltip, Overlay, Scrollable, Expose, and Flashembed.

How to Setup

• Download Scrollable component from download page and save it as jquery.tools.min.js. You can download it with jQuery (v1.3.2)  as a single file (21.75 kb) or as a separated file (3.37 kb) if you already have jQuery.



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

<script src="scripts/jquery.tools.min.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>

Using Scrollable UI library

HTML Code

<a class="prevPage left"></a>
<div class="scrollable">
    <div class="items">
        <!-- 1-4 -->
        <img src="http://londatiga.net/tutorials/scrollable/images/img1.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img2.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img3.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img4.jpg" />

        <!-- 5-8 -->
        <img src="http://londatiga.net/tutorials/scrollable/images/img5.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img6.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img7.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img8.jpg" />

        <!-- 10-12 -->
        <img src="http://londatiga.net/tutorials/scrollable/images/img9.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img10.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img11.jpg" />
        <img src="http://londatiga.net/tutorials/scrollable/images/img12.jpg" />
    </div>
</div>

<a class="nextPage right"></a>

line 01:  element for left/prev  button.

line 02: root element (div) for the scrollable.

line 03: wrapper element.

line 04-20: scrollable images (will be displayed  four images per slide).

line 24: element for right/next button.

CSS Code

Scrollable

.scrollable {
	background: #ccc;
	position: relative;
	overflow: hidden;
	width: 690px;
	height:145px;
	border:1px solid #ccc;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.scrollable .items {
	width: 20000em;
	position: absolute;
	clear: both;
}

.scrollable img {
    opacity: 0.6;
	float:left;
	margin:15px 5px 15px 15px;
	background-color:#fff;
	cursor:pointer;
	width:150px;
	height:113px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.scrollable .active {
    opacity:1;
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

line 01, style for  container element, the length and width depends on image size and how many images you want displayed per slide.

line 12, style for wrapper element.

line 18,  style for images in a slide.

line 30, style for selected image.

Navigation button (prev & next)

.scrollable { float:left; }

a.left, a.right {
	display: block;
	width: 18px;
	height: 18px;
	float: left;
	margin: 60px 10px;
	cursor: pointer;
}

a.right { background: url(scrollable/arrow/right.png) no-repeat;  clear:right; margin-right: 0px;}
a.right:hover  { background-position:0px -18px; }
a.right:active 	{ background-position:0px 0px; }

a.left	{ background: url(scrollable/arrow/left.png) no-repeat;  margin-left: 0px; }
a.left:hover  { background-position:0px -18px; }
a.left:active  { background-position:-0px 0px; }

a.disabled { visibility:hidden !important; }

line 01, allow next and  prev buttons placed on each side of the slide.

line 12,  set size and position of prev and next buttons.

line 16,  set background image for prev and next buttons.

Javascript Code

<script>
	$(function()  { $("div.scrollable").scrollable({size: 4}); });
</script>

$(”div.scrollable”) is a jQuery selector for scrollabe container. On example above, we set four images for each slide using configuration parameter ‘size‘. Default value of ’size‘ parameter is 5. You can learn more about the API of the Scrollable component on this page.

Image Cropping

Image cropping process can be separated into two separated process. The first process is for acquaring coordinates and dimensions of selected area of an image, which will be done in client side using JavaScript. The next is process for creating a new image based on coordinates and dimensions from previously cropping process using PHP on server side. In this tutorial, i’ll use JavaScript Image Cropper library by David Spurr and PHP GD image processing functions.

Client Side

Image Cropper is an excellent JavaScript library written by David Spurr that makes image cropping easier. It allows us to crop an image using an interface with the same features and styling as found in commercial image editing software. It is based on Prototype JavaScript Framework and Scriptaculous.

How to Setup

1. Download the required library files

- Prototype Javascript Framework

- Scriptaculous (scriptaculous-js-1.8.3.zip)

- Image Cropper (jsCropperUI-1.2.1.zip)

2. Extract scriptaculous-js-1.8.3.zip and copy scriptaculous.js, builder.js, effect.js and dragdrop.js from the extracted files into your web application directory.
3. Extract jsCropperUI-1.2.1.zip and copy cropper.js, marqueeHoriz.gif, marqueeVert.gif, cropper.css from the extracted files into your web application directory ( must reside in the same directory).
4. Include Prototype.js, scriptaculous.js and cropper.js in the HEAD section of your HTML file.

   <script src="scripts/prototype.js" type="text/javascript"></script>
   <script src="scripts/scriptaculous.js?load=effects,builder,dragdrop" type="text/javascript"></script>
   <script src="scripts/cropper.js" type="text/javascript"></script>
   

Using Image Cropper Library

With Dynamic Crop Preview

<script type="text/javascript" charset="utf-8">
Event.observe (
	window,
	'load',
	function() {
		new Cropper.ImgWithPreview(
			't3soeta',
			{
				minWidth: 200,
				minHeight: 100,
                ratioDim: { x: 200, y: 100 },
				displayOnInit: true,
				onEndCrop: saveCoords,
                onloadCoords: { x1: 0, y1: 0, x2: 200, y2: 100 },
                previewWrap: 'preview'
			}
		)
	}
);

function saveCoords (coords, dimensions)
{
	$( 'x1' ).value = coords.x1;
	$( 'y1' ).value = coords.y1;
	$( 'width' ).value = dimensions.width;
	$( 'height' ).value = dimensions.height;
}
</script>

<form action="saveCrop.php" method="post">
<div style="width:750px">
    <div style="float:left">
        <img src="images/t3soeta.jpg" id="t3soeta" width="500" height="375" />
    </div>
    <div id="preview" style="float:right;"></div>
    <div style="clear:both"></div>
    <input type="hidden" name="x1" id="x1" value="">
    <input type="hidden" name="y1" id="y1" value="">
    <input type="hidden" name="width" id="width" value="">
    <input type="hidden" name="height" id="height" value="">
</div>
<input type="submit" name="Done" value=" Done ">
</form>

Line 06: Instantiate Image Cropper class.

Line 07: Image Id.

Line 09: minWidth, is the minimum width for selected area in pixels.

Line 10: minHeight, is the minimum height for selected area in pixels.

Line 11: ratioDim, is the pixel dimensions to apply as a restrictive ratio, with properties x & y.

Line 12: displayOnInit, whether display the selected area on initialisation. If set to true, minWidth and minHeight or ratioDim must be provided.

Line 13: onEndCrop, a callback function which will be called when user finished a crop movement. The function takes two arguments:

• coords, is the coordinates of selected area with properties x1, y1, x2, y2.
• dimensions , is the dimensions of selected area with properties width and height.

On example above (Line 21), coordinates and dimensions are stored in hidden elements and will be sent to server side script (saveCrop.php) using HTTP POST method for later processing .

Line 14: onloadCoords, is the coordinates of the selected area to display onload

Line 15: previewWrap, is the id of container for image crop preview.

Line 21: callback function, as set on onEndCrop option (Line 13).

Line 33: image to be cropped, it’s id must match the id set on Line 07.

Line 35: div container for image crop preview.

Line 37-40: Hidden elements to store coordinates and dimensions of selected area.

View live demo here

Without Dynamic Crop Preview

For using Image Cropper without dynamic preview, change the class from Cropper.ImgWithPreview to Cropper.Img and remove the previewWrap option.

Event.observe (
	window,
	'load',
	function() {
		new Cropper.Img (
			't3soeta',
			{
				minWidth: 200,
				minHeight: 100,
                ratioDim: { x: 200, y: 100 },
				displayOnInit: true,
				onEndCrop: saveCoords,
                onloadCoords: { x1: 0, y1: 0, x2: 200, y2: 100 },
			}
		)
	}
);

View live demo here

Server Side

On server side, image is processed using PHP GD image functions, which required GD library installed.

<?php
$x1      = $_POST['x1'];
$y1      = $_POST['y1'];
$width   = $_POST['width'];
$height  = $_POST['height'];

$srcImg  = imagecreatefromjpeg('images/t3soeta.jpg');
$newImg  = imagecreatetruecolor($width, $height);

imagecopyresampled($newImg, $srcImg, 0, 0, $x1, $y1, $width, $height, $width, $height);

imagejpeg($newImg, 'images/cropped_t3soeta.jpg');
?>

Line 02-05: get coordinates and dimensions sent from client.

Line 07: create source image

Line 08: create a new true color image for cropped image

Line 10: copy selected area from source image into new image using coordinates and dimensions sent from client.

Line 12: Output the new cropped image into a file.