logo vPIP

 

videos Playing In Place

Posted by enric on the January 11th, 2007

Design how your videos are viewed and
Share them virally

Expertise Level: Basic HTML knowledge recommended.

Check out the new vPIP Blog

vPIP release 1.13h Beta


Play in ThickBox
Note: The above version refers to the vpip javascript application found in the vpip.js file (not other components like the plugin version in Wordpress.)

vPIP (videos Playing In Place) dynamically embeds a video after the viewer clicks on it's link. The link can be a text or image link. For example, click on the video to your right to see vPIP in action.

The result is that the web page loads quickly with only image and text links. Then when the viewer clicks one of the links pointing to a video, it's replaced with the embedded video. Clicking on another vPIP link closes the prior embedded video and opens the clicked one.

To begin using vPIP go to the appropriate documentation wiki page below for it's installation and usage:

The supported video (and audio) formats are:

If you find this tool useful and want to support future developments, please use the Paypal button below:

Thank You!

  • 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)
  • Ogg
    • .ogg (video)
    • .ogv (video)
    • .oga (audio)

Place one of the vPIP banners on your site:

and point it to

Thanks!

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

Play in ThickBox

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

Frequently Asked Questions

  • Which version of Wordpress will vPIP work on?
    • vPIP has been tested from version 1.5 to 2.2
  • My formatting is messed up, how do I fix that?
    • Turn off ThickBox in the admin Options-vPIP Config menu by unchecking "Enable ThickBox?". ThickBox sets up global CSS settings to center on a page that can conflict with other CSS.

Caveats

  • On Opera, the Flash media player, cineViewer, doesn't release the video connection when viewed after the first time using dynamically embedding. To solve this on Opera when the flash video is closed, the page is refreshed.
  • Windows media locks up on Firefox when playing in ThickBox. This is probably a problem in jquery.js and will be looked into for fixing in a future release.
  • The Google Analyticator Wordpress plugin conflicts with vPIP. It is not advised to have them both active. vPIP was found to fail when the Google Analyticator Wordpress plugin was active on Windows XP running FireFox 1.5 and Internet Explorer 7.
    Also the Google Analytic script, ga_external-links.js, conflicts with calling vPIP since it replaces the onclick anchor calls.
  • Mac Safari version 1.3.2 and 2.0 (below build 420) continues playing scripts after they've been replaced with their poster image. Also, ThickBox with video does not work correctly on Safari. So the vPIP revert capability does a page refresh for Safari before build 420 and ThickBox feature only does an embed for the Safari browser.

What's New

  • vPIPFeed: fixed search for "a href" to only "href"

Changelog

  • v 1.13h - March 3rd, 2008 9:55 am PST
    • vPIPFeed: fixed search for "a href" to only "href"
  • v 1.13g - January 14th, 2008 10:38 pm PST
    • Embed code available while video is playing is the hVlog innerHTML when video is closed.
    • Styled active when embed code turned off.
  • v 1.13f - January 6th, 2008 4:00 pm PST
    • Support for same domain style sheet class entries on FireFox.
  • v 1.13e - December 30th 7:30 pm PST
    • Trace behaving badly when not present -- commented out.
  • v 1.13d - December 30th 7:30 pm PST
    • center embed button with "margin-left: auto; margin-right: auto;" style.
    • All of the vPIP hVlog entry can be unstyled.
  • v 1.13c - November 19th 12:05 pm PST
    • Update to license.txt for all vPIP components.
  • v 1.13b - November 13th 3:57 pm PST
    • Support for quicktime loop and target parameters.
    • "Vlogsplosion" identifiers and titles changed to "Media Entry".
  • v 1.13a - November 1st 11:29 am PST
    • Support for quicktime kioskmode parameter.
  • v 1.13 - October 12th 12:50 pm PST
    • Inclusion and support for new Flash media player, cineViewer.
  • v 1.12m - September 30th, 2007 11:22 am PST
    • The field for the external flash player parameter to open the movie length increased to 500 characters.
  • v 1.12l - September 29th, 2007 6:15 pm PST
    • Support for structured Flashvars entries with movie url plugged into "" in the "Parameter to open movie:" field.
  • v 1.12k - September 26th, 2007 10:52 pm PST
    • Fixed bug in vpip_db_version not updating when upgrading database isn't necessary.
  • v 1.12j - September 23rd, 2007 8:32 pm PST
    • Allow unpublished posts when requesting vlogsplosion data, _vPIP_GetVlogsplosionData.
  • v 1.12i - September 20th, 2007 5:14 pm PST
    • Change to X11 license compatible with GPL.
    • Shorten Media For column.
  • v 1.12h - September 16th, 2007 10:00 pm PST
    • vPIP site reference is in embed code section.
    • Check before creating Vlogsplosion tables when site is viewed(vPIP_Content_Process).
    • New _vPIP_GetVlogsplosionData from Charles Iliya Krempeaux.
    • For Wordpress 2.30 compatability: Fix error in not provided SQL Query to $wpdb->get_results($query).
    • For Wordpress 2.30 compatability: Check if dbDelta is in ABSPATH . 'wp-admin/upgrade-functions.php' or ABSPATH . 'wp-admin/upgrade-functions.php'.
    • If creating or updating tables, don't do table ops; ask to refresh page.
    • Change "share" to "embed" for embed button.
    • Function the_posts(...) upated for VideoPress Video Feeds.
    • Embed text textarea has cols="".
  • v. 1.12d - September 12th, 2007 7:29 pm PST
    • bug fix for escaping already escaped ID.
    • bug fix for class IDs not getting new identifier number.
    • Change to X11 license compatible with GPL.
    • Strip out extraneous vPIP HTML from vPIP Feed.
  • v. 1.12c - September 7th, 2007 11:31 am PST
    • Bug fix of escaping already escaped ID.
    • bug fix for class IDs not getting new identifier number.
  • v. 1.12b - September 6th, 2007 10:11 pm PST
    • vPIP reference in embed code box.
  • v. 1.12a - September 6th, 2007 5:27 pm PST
    • The entire hVlog area is shared.
    • The embed text is automatically selected and copyied to the clipboard (for supported browsers) when viewer clicks on the embed text.
    • The embed text code includes the share embed section, allowing continued sharing to each embed.
  • v. 1.11d - September 3rd, 2007 2:20 pm PST
    • Correct for misaligned Vlogsplosion media line entries when writing post.
  • v. 1.11c - September 2nd, 2007 11:17 am PST
    • When the ThickBox caption is received it is unescaped.
  • v. 1.11b - August 31st, 2007 3:33 pm PST
    • 1.21 data tables (MediaDefault & VideoFormat tables with Embed fields embedCodeBtnTitle, embedCodeStyled)
    • Text of share button can be set.
    • CSS Styling can be turned off for embed section
    • 'class="vpip-vs-mediatitle"' removed from embed code.
  • v. 1.11a - August 27th, 2007 11:22 am PST
    • Fixed “Flash” link appearing when “Use an external Flash Player?” is unchecked.
    • Ogg video can now be played through signed cortado.jar Ogg player.
    • Share Embed Code button and drop down for viewer to place video on their site (wordpress only.)
    • vPIP API implemented (wordpress only.)
    • mediaFor displays target platform for video -- informational only (wordpress only.)
    • New interface for internal flash video player.
  • v. 1.10 - June 29, 2007
    • Using 640x520 flash player that scales down.
    • The vlogsplosion interface for easily entering your poster Image and types of videos.
    • ThickBox works now on IE6 & Safari (need code generator or coding by hand for ThickBox.)
    • Flash viewer, cirneViewer*.swf, controls automatically resize to vlog dimension specified in vPIP.
    • Need to only specify the video size (the control area will automatically be entered.)
      • May need to go back to prior vPIP vlog entries and change the size down.
    • vPIP Feeds widget for placing feeds list in your blog sidebar.
      • The media types (Flash, Quicktime, iPod, Apple TV, Mobile, Windows Media) can be specified to unique feeds.
      • The a ability to specify feeds is very flexible from just the extension of the movie (wmv, mov, mp4, flv, etc.) to wild cards for the video file names ( i.e., vacation*.mov).
      • And multiple file types can be specified with a comma (like mov,mp4).
    • An external flash player can be specified.
  • v. 1.00c - Febuary 3, 2007
    • jQuery calls changed from $(...) to jQuery(...) to not conflict with other libraries like Lightbox.
    • If the vpipit function exists, vPIPPlayer.prototype.thickBox_remove will call vpipit to reinstate the automatic vPIP calls to links.
    • New Wordpress plugin option to turn on/off the abiltity to automatically make movie links work with vPIP.
    • New Wordpress plugin option to turn on/off the ThickBox script.
    • New Wordpress plugin option to turn on/off displaying the vPIP Code Generator.
  • v. 1.00b
    • Rewritten from procedural to object-oriented version of vpip.js.
    • Missing hVlog DIV created dynamically when embed generated.
    • If vpipit.js included, all links without onlick calls recognized as movie files are setup to call vPIP.
    • Quicktime embed adjusts video size to embed width and height while keeping aspect ratio -- scale="tofit".
    • Dynamic loading of Flash FLV player, cirneViewer.swf, user interface through xml file.
    • [X Close] button can be removed.
    • Two Flash players available for 320x240 and for up to 450x300. If width is 320 or less, the 320x240 player is used, otherwise the 450x300 player is used.
    • Flash hooks into scripts for showing the number of video views and sharing the video through an email link.
    • Flash graphics at end for "Replay" and "Share" (share is for sending email link of video.)
  • v. 0.16g
    • Close button on Safari prior to build 420, reloads the page.
  • v. 0.16f
    • Removed unnecessary <iframe id='TB_HideSelect'></iframe> from _vPIP_TB_show(...) to fix problem of iFrame remaining after ThickBox closes.
    • Check for Internet Explorer 6 and bypass running Thickbox on IE 6. Run as dynamic embedded video.
  • v. 0.16e
    • Code generation for WMV width fixed.
    • cirneViewer ability to set State.scaleMode.
    • cirneViewer ability to hide timecode with default hidden.
    • cirneViewer name is suffixed with version number for new load.
  • v. 0.16d
    • Thickbox operational for Opera. Tested on Opera 9.
  • v. 0.16c
    • For WordpressMU implementation: Fix <div...> and </div> being stripped.
  • v. 0.16b
    • For WordpressMU implementation: Allow for bracketed code to start with "[hVlog..." (missing "
      " at start because wordpressmu strips it.
  • v. 0.16
    • Install zip package for WordpressMU
    • plugin in mu-plugins folder with WordpressMU defaults.
  • v. 0.15f
    • Wordpress Options menu option to set the vPIP Plugin location.
  • v. 0.15e
    • Option to generate and process bracketed code for WordpressMU.
    • vPIP options menu in Wordpress with choices of inserting script links into <HEAD> section of page and for using bracketed code.
    • Support reverting to link and close menu for Safari build 420 and higher.
  • v. 0.15d
    • Allow "~" character in movie url string
  • v. 0.15c
    • Correctly determined file extension of HREF when it includeds ? parameters.
  • v. 0.15b (maintenance release)
    • Fixed bug where the path of the vPIP.js script sometimes was not determined.
  • v. 0.15
    • 3gp phone video and audio files supported in quicktime.
    • If a link with class="hVlogTarget" is used, usually an image link, it will specifically have the embedded the video. Other links will continue to display while the embedded video is active.
    • 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.

Comments have move to the vPIP google groups discussion group. Please join there for any questions, problems or suggestions.

Comments Off