Note: Please don’t cut-n-paste the following code. If you want this plugin, then download the necessary files as a Zip File from This Page.
A friend of mine told me yesterday about vPIP. It’s a collection of JavaScript code to allow for "Videos Playing in Place". Basically, you can present an image on your page that when people click on it suddenly springs to live to play a movie. It’s similar to the technology behind YouTube and all those other embedded video sites. The Videos take alot of bandwidth and client-side resources, and there’s no reason to send them to the user until they explicitly ask for them. It makes the browsing experience faster, while keeping it pretty clean and transparent to the user.
After a bit of research, vPIP seemed like a great thing to put on the DAAC wiki. We have a fair number (an increasing number too) of videos on the website in our Wiki, and right now we show an image and a link to download the movie to the user. It works, but it’s a bit clunky, especially since MediaWiki makes it so friggin difficult to have an Image as a Link to something else. I first attempted to make a vPIP template that would generate the necessary HTML & JavaScript code, but MediaWiki kept removing the additional tags, breaking it. It’s a safety feature, I understand, and one that I couldn’t find any way around (which is probably a good thing).
So my next attempt was to create a Plugin for MediaWiki. I already had one or two installed, and was able to use one of them as a template. Continue inside for the details….
[tag:mediawiki][tag:vpip][tag:plugin]
<?php
$wgExtensionFunctions [] = 'wfVPIP';
function wfVPIP() {
global $wgParser;
$wgParser->setHook('video', 'insertvPIPBlock');
}
function insertvPIPBlock($source) {
$lines = explode("n", trim($source));
$video = "";
$title = "";
$caption = "none";
$image = "";
$type = "auto";
$typevar = "";
$width = "320";
$height = "260";
$dl = "none";
foreach ($lines as $l) {
$pos = strpos($l, "=");
$key = substr($l, 0, $pos);
$val = substr($l, $pos+1);
switch (strtolower($key)) {
case "url": $video = $val; break;
case "title": $title = $val; break;
case "caption": $caption = $val; break;
case "image": $image = $val; break;
case "type": $type = $val; break;
case "width": $width = $val; break;
case "height": $height = $val; break;
case "download": $dl = $val; break;
}
}
if ( $type == "auto") {
$extension = substr($video, -3, 3);
switch (strtolower($extension)) {
case "mov": $typevar = 'type="video/quicktime"'; break;
case "mp4": $typevar = 'type="video/mp4"'; break;
case "m4v": $typevar = 'type="video/x-m4v"'; break;
case "mp3": $typevar = 'type="audio/x-mp3"'; break;
case "smi": $typevar = 'type="application/smil"'; break;
case "3gp": $typevar = 'type="video/3gpp"'; break;
case "avi": $typevar = 'type="video/x-msvideo"'; break;
case "wmv": $typevar = 'type="video/x-ms-wmv"'; break;
case "asf": $typevar = 'type="video/x-ms-asf"'; break;
case "wma": $typevar = 'type="audio/x-ms-wma"'; break;
case "swf": $typevar = 'type="application/x-shockwave-flash"'; break;
case "flv": $typevar = 'type="application/x-shockwave-flashf"'; break;
default:
$typevar = "";
break;
}
} else {
$typevar = " type="$type"";
}
if ( $caption == "none") $caption = $title;
$res = "";
$res = $res . "<div class="hvlog" style="position: relative;">";
$res = $res . "<a href="$video" rel="enclosure" class="hVlogTarget" title="$title" $typevar onclick="vPIPPlay(this, 'width=$width, height=$height, autostart=true, controller=true, name=MyMovie, revert=true', '', 'active=true, caption=$caption'); return false;">";
$res = $res . "<image src="$image" />";
$res = $res . "<div style="position:absolute; left: 5px; top: 5px; font-weight: bold"><img src="/wiki/PlayButton.gif" ></div>";
$res = $res . "</a>";
if ($dl == "none") {
} else {
$res = $res . "<div style="position:absolute; left: 5px; top: 60px;">";
$res = $res . "<a href="$dl">";
$res = $res . "<img src="/wiki/DownloadButton.gif" ></a></div>";
}
$res = $res . "</div>";
return $res;
}
|
This creates a new Parser Hook (at the top) called video, and registers a function to run with that hook. The second function actually handles parsing the arguments and creating the necessary HTML & JavaScript output to make it all work. Then simply include this PHP file in the LocalSettings.php file and tada, it’s all done. You can see a great example of this in action at the DAAC Wiki Breaking Waves gallery. This code also makes use of a neat CSS trick I learned: Placing Absolutely Positioned DIV’s inside Relatively positioned Div’s for layering. This way I can overlay the "Play" and "Save" buttons over the image, without having to embed them every time. Also, I can make the two overlaid images be part of two separate A link tags.
