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:


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:

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:


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

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


      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>):


    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:

  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:

Place one of the vPIP banners on your site:

and point it to

Thanks!

Caveats

New Features

Changelog