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
To begin using vPIP to to the section below for it's installation and usage:
- 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
- Download by right clicking the --> vPIP link <-- and Save ... As "vpip.zip" to a location on your computer.

- Extract vPIP.zip to create the vPIP folder
- 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.
- From the Blogger Dashboard click on the "Change Settings" icon and choose the "Template" tab.
- Scroll down just before the closing </head> tag and copy & paste the following lines in:
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:
Or the server locations kindly provided by --> VlogAssist <--.

- 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:
- Download vPIPwp.zip by right clicking the --> vPIP link <-- and Save ... As to a location on your hard disk.

- 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.

- Go to Plugins and activate vPIP.

- 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.

- 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.
- You are now ready to use vPIP in writing blog posts and pages. To do that, go to the Using vPIP section.
- 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
- going to Presentation->Theme Editor
- Select the Header template.
- Place the following line before </head>:
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:
- Download by right clicking the --> vPIP link <-- and Save ... As "vpip.zip" to a location on your computer.

- Extract vPIP.zip to create the vPIP folder
- 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.
- Place the following lines in the <head>...</head> section of your blogging software template or web page (normally this would go before </head>):
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:
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:
- Right click on -->GenvPIP0-06a.swf<-- and Save ... As to a location on your hard disk.
- Right click on -->GenvPIP0-06a.html<-- and Save ... As to a location on your hard disk.
- Copy both GenvPIP0-06a.swf and GenvPIP0-06a.html to the web location you want to run it from.
- 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 <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
Thanks!
- 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.
- 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.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.