Play in ThickBox

### vPIP release 0.15 Beta

vPIP (video Playing In Place) dynamically embeds a video after the viewer clicks on the link. Click on the video to your right to see it in action.

The results are that the page loads quickly with just image and text links. Then when the viewer clicks one of the video links, it's replaced with the embedded video. Clicking on another video link closes the prior embedded video and opens the new one selected.

The supported video (and audio) formats are:

- Quicktime
  - .mov (video)
  - .mp4 (video)
  - .mp3 (audio)
  - .smi or .smil (dynamic video)
  - .3gp (video & audio)
- Windows Media
  - .avi (video)
  - .wmv (video)
  - .asf (video)
  - .wma (audio)
- Flash
  - .swf (video application)
  - .flv (video)

Click on the image below for a introduction and comparison to vPIP
Play in ThickBox

To begin using vPIP to to the section below for it's installation and usage:

- If you have a Blogger.com account, go to the Blogger Installation section.
- If you have Wordpress installed on a server, go to the Wordpress Installation section.
- For all other web installs go to the General Installation section.

- If you've completed the install, go the the Using vPIP section.

For the current bugs found in this release, go to the Caveats section. For new features go to the New Features section.

## Blogger Installation

1. Download by right clicking the --> vPIP link <-- and Save ... As "vpip.zip" to a location on your computer.

2. Extract vPIP.zip to create the vPIP folder
3. Upload either the vPIP folder or it's contents to an accessible internet location. It can be on any file sharing system or other server that can be accessed as a URL through HTML.
   Note: If you don't have a internet location to upload to, alternate locations will be specified in the steps below.
4. From the Blogger Dashboard click on the "Change Settings" icon and choose the "Template" tab.
5. Scroll down just before the closing </head> tag and copy & paste the following lines in:

   <script src="http://[url where vPIP was uploaded to]/vpip.js" type="text/javascript"></script> <style type="text/css" media="all">@import "http://[url where vPIP was uploaded to]/vPIPBox.css";</style> <script src="http://[url where vPIP was uploaded to]/jquery.js" type="text/javascript"></script>
   Replace [url where vPIP was uploaded to] with the web server location you uploaded the vPIP content to in step 2 above.
   Note: If you don't have a internet location to upload to, use the following alternate locations:

   <script src="http://utilities.cinegage.com/downloads/vPIP0.15/vpip.js" type="text/javascript"></script> <style type="text/css" media="all">@import "http://utilities.cinegage.com/downloads/vPIP0.15/vPIPBox.css";</style> <script src="http://utilities.cinegage.com/downloads/vPIP0.15/jquery.js" type="text/javascript"></script>

   Or the server locations kindly provided by --> VlogAssist <--.

6. Click the "Save Template Changes" button and then the "Republish" button

That's it. You are now ready to use vPIP in writing your blog posts. To get information on doing that, go to the Using vPIP section.

## Wordpress Installation

The vPIP Wordpress Plugin installs the vPIP scripts and style sheet into the header section of blog the page. With that, the Generate vPIP HTML Code app will be available below the blog post that is being written.

To install vPIP, follow these steps:

1. Download vPIPwp.zip by right clicking the --> vPIP link <-- and Save ... As to a location on your hard disk.

2. Extract vPIPwp.zip to create the vPIP folder and upload it to your ../wp-content/plugins location of your Wordpress installation.

- If your using Wordpress 1.5, in admin mode go to Options->Writing and uncheck "WordPress should correct invalidly nested XHTML automatically".

- If your using Wordpress 2.x, as Admin go to Users->Your Profile and uncheck "Use the visual rich editor when writing". Then go to Options->Writing and uncheck "WordPress should correct invalidly nested XHTML automatically". If your users will also be using the vPIP plugin, also uncheck Users should use the visual rich editor by default.

3. Go to Plugins and activate vPIP.

4. If using Word 2.x, clear the persistent cache under ../wp-content/cache/ by deleting all the filed and folders under it. They'll be recreated with any changes when the blog is accessed by users.

5. Below where you'll be writing your post, the "Generate vPIP HTML code" helper app is available.

   From this you can specify the movie files (Quicktime, Windows Media and/or Flash) and their display parameter. Then the "Generate Code" button will provide the vPIP HTML code to paste into your blog entry.
   Note: This Flash app will sometimes hold the cursor from typing back in the write box. In that case open the app externally with the "Open in external window: vPIP" button.
6. You are now ready to use vPIP in writing blog posts and pages. To do that, go to the Using vPIP section.
7. If vPIP doesn't work, then your theme header template probably doesn't support inserting the script from the plugin. In that case, manually put in the reference to the script by
   1. going to Presentation->Theme Editor
   2. Select the Header template.
   3. Place the following line before </head>:

      <script src="http://[url where vPIP was uploaded to]/vpip.js" type="text/javascript"></script> <style type="text/css" media="all">@import "http://[url where vPIP was uploaded to]/vPIPBox.css";</style> <script src="http://[url where vPIP was uploaded to]/jquery.js" type="text/javascript"></script>
      Replace [url where vPIP was uploaded to] with the Wordpress directory location you uploaded vpip.js to in step 2 above. For example, a location could be http://mysever/wp/wp-content/plugins/vPIP/vpip.js

For the HTML structure that vPIP uses, read the Using vPIP section.

## General Installation

vPIP is a script (javascript) file that should work on any blogging software and website. These are the steps to install vPIP:

1. Download by right clicking the --> vPIP link <-- and Save ... As "vpip.zip" to a location on your computer.

2. Extract vPIP.zip to create the vPIP folder
3. Upload either the vPIP folder or it's contents to an accessible internet location. It can be on any file sharing or other server that can be accessed through HTML.
   Note: If you don't have a internet location to upload to, alternate locations will be specified in the steps below.
4. Place the following lines in the <head>...</head> section of your blogging software template or web page (normally this would go before </head>):

   <script src="http://[url where vPIP was uploaded to]/vpip.js" type="text/javascript"></script> <style type="text/css" media="all">@import "http://[url where vPIP was uploaded to]/vPIPBox.css";</style> <script src="http://[url where vPIP was uploaded to]/jquery.js" type="text/javascript"></script>
   Replace [url where vPIP was uploaded to] with the web server location you uploaded the vPIP content to in step 2 above.

   Note: If you don't have a internet location to upload to, use these alternate alternate locations: <script src="http://utilities.cinegage.com/downloads/vPIP0.15/vpip.js" type="text/javascript"></script> <style type="text/css" media="all">@import "http://utilities.cinegage.com/downloads/vPIP0.15/vPIPBox.css";</style> <script src="http://utilities.cinegage.com/downloads/vPIP0.15/jquery.js" type="text/javascript"></script>

Or the server locations kindly provided by --> VlogAssist <--.

That's it. You are now ready to use vPIP in writing blog posts and creating web pages. For instructions, go to the Using vPIP section.

## Using vPIP

### Quick Start

Click on the image below to open the vPIP code generator. There you can specify the type of movie you have -- Quicktime, Windows Media or Flash movie -- and the display options. (For Flash, just the .SWF files are currently supported.) Once specified, hitting the [Generate Code] button allows you to paste the vPIP code in the web location your movie will play:

If you'd like to host the "Generate vPIP HTML code" app:

1. Right click on -->GenvPIP0-06a.swf<-- and Save ... As to a location on your hard disk.
2. Right click on -->GenvPIP0-06a.html<-- and Save ... As to a location on your hard disk.
3. Copy both GenvPIP0-06a.swf and GenvPIP0-06a.html to the web location you want to run it from.
4. Reference GenvPIP0-06a.html to start the "Generate vPIP HTML code" app.

The following is the HTML coding for vPIP.

vPIP uses standard HTML in a specific structure to emded Quicktime, Windows Media and Flash applications (SWF) movies. The format is a <div class="hvlog"...> tag containing a <a href=... rel="enclosure"... onclick="vPIPPlay(this{, '...'}); return false" ...> link tag. Usually the link reference is a poster image for the movie, <img src=...> or text description. An example of a minimal vPIP HTML is:

> <div class=”hvlog”>
> <a href=”http://www.myserver.com/media/myMovie.mov” rel=”enclosure” title=”My Movie!” onclick=”vPIPPlay(this); return false;”>
> <img src=”http://www.myserver.com/images/myMovie.jpg” />
> </a>
> </div>

Note: The url for <a href="..." must be enclosed in double quotes, "..." per the XML standard. Single quotes will fail in services like Feedburner.

### Detailed Usage

The following are examples in Quicktime, Windows Media and Flash (SWF) using variants of all of vPIP's parameters:

#### Quicktime example

> <div class=”hvlog”>
> <a href=”http://www.myserver.com/media/myMovie.mov” rel=”enclosure” class="hVlogTarget" title=”My Movie!” type="video/quicktime" onclick=”vPIPPlay(this, 'width=320, height=260, autostart=true, controller=true, name=MyMovie, revert=true', '', 'active=true, caption=My Grand Movie'); return false;”>
> <img src=”http://www.myserver.com/images/myMovie.jpg” />
> </a>
> </div>

#### Windows Media example

> <div class=”hvlog”>
> <a href=”http://www.myserver.com/media/myMovie.wmv” rel=”enclosure” title=”My Movie!” class="hVlogTarget" type="video/x-ms-wmv" onclick=”vPIPPlay(this, 'width=320, height=260, autostart=true, controller=true, name=MyMovie, revert=true'); return false;”>
> <img src=”http://www.myserver.com/images/myMovie.jpg” />
> </a>
> </div>

#### Flash example

> <div class=”hvlog”>
> <a href=”http://www.myserver.com/media/myMovie.swf” rel=”enclosure” title=”My Movie!” class="hVlogTarget" type="application/x-shockwave-flash" onclick=”vPIPPlay(this, 'width=320, height=260, name=MyMovie, quality=High, bgcolor=#FFFFFF, revert=true, flv=true', ''FLVbuffer=10', 'active=true, caption=My Sweet Film); return false;”>
> <img src=”http://www.myserver.com/images/myMovie.jpg” />
> </a>
> </div>

Both .swf and .flv files are supported. FLV files are supported by the included flv viewer, cirneViewer.swf.

The tag heirarchy for vPIP is:

> <div ...>
> <a ...>...</a>
> </div>

The tag parameters follow.
Optional entries enclosed in {}.

The <div ...> tag has one required parameter: <class="hvlog". Do not use the id="..." parameter because vPIP will put in it's own unique ID.

The <a ...> tag parameters are:

- href="[url to videoblog file]"
  This is a required parameter.
  Note: The url for <a href="..." must be enclosed in double quotes, "..." per the XML standard. Single quotes will fail in services like feedburner.
- rel="enclosure"
  This is a required parameter.
- class="hVlogTarget"
  This is an optional parameter, but recommended. The link with this class -- it should be only one link in the hVlog structure -- will receive the embedded video. It is usually a image link. Other links will continue the be available as the embedded video is available.
- type="[mime type]"
  This is a optional, but highly recommended parameter. The mime types supported in this release are:
  - quicktime
  - mov: video/quicktime
  - mp4: video/mp4
  - m4v: video/x-m4v
  - mp3: audio/x-mp3
  - smi: application/smil
  - 3gp: video/3gpp
  - windows media
  - avi: video/x-msvideo
  - wmv: video/x-ms-wmv
  - asf: video/x-ms-asf
  - wma: audio/x-ms-wma
  - flash
  - swf: application/x-shockwave-flash
  - fla: application/x-shockwave-flash
- onclick=vPIPPlay(this, {'width=[integer], height=[integer], autostart=[true/false], controller=[true/false], name=[string], quality=[High/AutoLow/AutoHigh], bgcolor=[color value], revert=[true/false], flv=[true/false]', 'FLVbuffer=number 1-100 percentage to load before playing]', 'activate==[true/false], caption==...}); return false;”
  onclick=vPIPPlay(this, {'...'}); return false;" is a required parameter.
  - The vPIPPlay(this, {...}); return false; function has one required parameter: this, the reference inside the vPIPPlay javascript function to it's calling link. The vPIPPlay functions is followed by return false; which deactivates the browser from jumping to it's href link.

    The first group of optional parameters define the movie's embedding parameters. Their meaning are:

    - width = the integer value for the width of the video/application display area. This includes the controller.
      Quicktime, Windows Media and Flash use this parameter.
      The default is 320.
    - height = the integer value for the height of the video/application display area. This includes the controller.
      Quicktime, Windows Media and Flash use this parameter.
      The default is 260.
    - autostart = the boolean value of "true" or "false" for whether the video starts immediately.
      Quicktime and Windows Media use this parameter.
      The default is true.
    - controller = the boolean value of "true" or "false" for whether the controller is displayed.
      Quicktime and Windows Media use this parameter.
      The default is true.
    - name = the string value for the id of the embedded object.
      Quicktime, Windows Media and Flash use this parameter.
      The default is "" (empty string)
    - quality = the current rendering quality of "low/high/autoLow/autoHigh".
      Flash uses this parameter.
      The default is high.
    - bgcolor = Override the background color of a movie.
      Flash uses this parameter.
      The default is #FFFFFF - white.
    - revert = the boolean value of "true" or "false" for whether the movie reverts back to link element that was clicked to initiate it when another link element is clicked.
      All movie types use this parameter
      The default is true.
    - flv = the boolean value of "true" or "false" for whether this flash video is an FLV file.
      All movie types use this parameter
      The default is true.

  - The second group of optional parameters define the Flash FLV Player paremeters. Their meaning is.

    - FLVbuffer = the number between 1-100 for the amount of video to buffer in the flv viewer, cirneViewer, before the video is automatically played.
      The default is 15.

    - The third group of optional parameters define the ThickBox paremeters. Their meaning are:

      - activate = the boolean value of "true" or "false" for whether the movie will play in Thickbox.
        The default is false.
      - caption = the string value of the caption that displays above the movie in Thickbox.
        The default is an empty string.
  The <img …> tag parameters is highly recommended but optional. Any item allowed within <a href=...></a> can be placed in. However the <img ...> tag will be used by some aggregators as the display image for the movie. The form of the <img..> tag is:
  - < img src="[url to image file]" />

Place one of the vPIP banners on your site:

and point it to http://utilities.cinegage.com/videos-playing-in-place/

Thanks!

## Caveats

- Mac Safari version 1.3.2 and 2.0 continues playing scripts after they've been replaced with their poster image. So the vPIP revert capability has been disabled for the Safari browser.
- Tests of Opera on PC and Mac do not correctly display movies in ThickBox. ThickBox has been disabled for Opera.

## New Features

- 3gp phone video and audio files supported for quicktime.
- If a link with class="hVlogTarget" is used, usually an image link, it will embed the video. And other links will continue to display while the video is playing.
- Flv player, cirneViewer.swf, incorporated in vPIP package.
- vPIP is now licensed under LGPL, except cirneViewer which is fully copyrighted. cirneViewer is free only for non-commercial use.

## Changelog

- v. 0.15
  - 3gp phone video and audio files supported for quicktime.
  - If a link with class="hVlogTarget" is used, usually an image link, it will embed the video. And other links will continue to display while the video is playing.
  - Flv player, cirneViewer.swf, incorporated in vPIP package.
  - vPIP is now licensed under LGPL, except cirneViewer which is fully copyrighted. cirneViewer is free only for non-commercial use.
- v. 0.14
  - Multiple video formats target one link.
  - Support for Quicktime SMIL movies.
  - ThickBox version of Lightbox effect incorporated in vPIP script (vpip.js).
  - Close button above the embedded movie:
- v. 0.13
  - Recursive search from anchor for div tag.
  - vPIP.php wordpress plugin inserts linked vPIP button to activate "Generate vPIP HTML code" utility
  - Errors reported in javascript console with setTimeout("[error]", 0);. And if href is available, it's activated with window.open([href], "_self");.
- v. 0.12
  - Replaced the vPIPPlay(this{, '...'}); return false; function call in <a href="...". This is a direct call to the vPIPPlay javascript function that elminates the problem of waiting for the page to fully load.
  - The internal array that holds the Div and Link information allows multiple links in an Div.
  - v. 0.11 vPIPShow is supported with mulitple links in the Div.
- v. 0.11
  - Places the vPIPShow({...}) function call in <a href="...".
  - Strip out non-alphanumerics from href and onclick paraemeters of the a tag.
- v. 0.10
  - Replaced <object ...> tag with <div class=”hvlog”><a href....><img src=... /></a></div>
  - Ability to revert back to the link, usually <img src=... />, when another vPIP link is clicked.
  - Support for Windows Media and Flash embed along with Quicktime.
  - Generalized javascript utility that should work in most browsers, blogging systems and websites
- v. 0.02
  - Replaced <vPIP ...> tag with <object ...> tag.