Archive for the ‘Web Development’ Category

JQuery Image Zoom Plugin

Sunday, March 7th, 2010

I recently posted the code for my jquery image zoom plugin here.

Secrete JavaScript Debugger in Safari

Friday, February 19th, 2010

First in Safari go to the Develop menu and select "Start Debugging JavaScript" from the drop down.
Next you'll want to add a call to debugger in your javaScript like this.

 
function onSomeThing() {
  debugger;
}
 

You will then be able to run your page and have the Safari JavaScript debugger add a break point where your debugger call is placed.

Architecture of the Veoh Player

Tuesday, December 1st, 2009
Interactive Overlay Video Ad

Interactive Overlay Video Ad

The player lives on veoh.com and as an embedable player on sites like facebook. It plays more than 3 million videos per day to a global audience. The player is also the primary vehicle for our Behavioral Ad Targeting.

Development

Veoh Player Documentation

Veoh Player Documentation


This player played a key role in monetizing Veoh's business model. With this in mind the player architecture must accommodate an intense product life cycle and reliability.

I was able to achieve a reliable, scaleable and, testable code with Test Driven Development and common Design Patterns. This worked out so well after months of adding/removing features and product directions the code base still has no cruft!

To improve performance during progressive seeking I implemented a Binary Search to find the closest keyframe.

Multiple Logging Systems such as Nielsen, Omniture, Quantcast, Visible Measures, TubeMogul and our own data center.

Multicore PureMVC my choice because it's alight weight framework that could control a Flex or a pure ActionScript project.

Veoh Data SDK

My first step in converting the Veoh player to OOP was to create an API for our REST service.
Here is an example of how to fetch a video.

 
var service:VeohService = new VeohService( VEOH_API_KEY );
service.addEventListener( VeohResultEvent.SEARCH_SEARCH, handle_response);
service.search.findByPermalink( _videoPermalink );
 

VeohPlayback Player

I developed a VeohPlayback object with s similar interface to Adobe's FLVPlayback Component.
Unlike the Adobe's Component ours will play videos from our CDN, the Veoh P2P network, YouTube or CBS.

In Player Advertising

In early 2007 we created one of the first in-stream ad systems. We later partnered up with Freewheel to deliver our in-stream ads. Since we one of Freewheels first clients I worked closely with their development team in NYC and China on their ActionScript SDK.

Event based ads was something I was pushing for before working with Veoh. At Aviatech I was able to use event based ads to sell products. This example for Calloway Golf is a great example. My theory here was that many users would react to the video auto playing and immediately click pause. When the user clicks the pause button we know they are looking at the player and in this demo we show the product. After bringing this idea to Veoh it proved to have a higher click through rate than a typical overlay ad.

We have also integrated ads from Axel Springer, Scanscout and DoubleClick.

Testing and Planning

UML

UML

ASUnit TestRunner

ASUnit TestRunner

Planning: During he planning phase we implemented new features in out UML charts and discussed it's impact before writing any code.

Testing: Since this player is responsible for Veoh's main revenue stream I saw the need implement Test Driven Development. After I fully emerged my team with TDD the product life cycle became much smoother and more manageable. We used AsUnit along with ProjectSprouts/Growl to auto run the test suite. We also forked the ProjectSprouts to add some generators for AsUnit and PureMVC.

Continuous Integration: We have Hudson set up to test and build the player.

How to add a click tag to flash banner ads

Monday, August 3rd, 2009

DoubleClick and other ad servers often embed Flash movies with the click through url as a flashvar named "clickTag". Here is the code in ActionScript 2.0 and 3.0 to use the clickTag flashVar.

ActionScript 2.0

 
on (release) {
    var url:String = "";
    url = _level0.clickTag || _level0.ClickTag || "";
    getURL(url, "_blank");
}
 

ActionScript 3.0

 
var _clickTag:String = "";
if(stage.root.loaderInfo.parameters.clickTag) {
     _clickTag = stage.root.loaderInfo.parameters.clickTag;
}
private function handle_btnClick(e:MouseEvent):void {
     ExternalInterface.call("window.parent.open", _clickTag);
} 
 
myButton.addEventListener(MouseEvent.CLICK, handle_btnClick);
 

Test your swf by adding the clickTag flashVar to your embed code.

 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="250" id="300x250_standard" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="flashVars" value="clickTag=http://shrelp.com" /><param name="movie" value="300x250_standard.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="300x250_standard.swf" quality="high" bgcolor="#000000" width="300" height="250" name="300x250_standard" align="middle" allowScriptAccess="sameDomain"
	 allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" flashVars="clickTag=http://ss.jonathanspooner.com" />
	</object>
 

Building multiple swf’s with Project Sprouts

Wednesday, April 22nd, 2009

For each additional swf you'll create a new task in your rakefile like this.

 
desc 'Menu App'
task :menu => "bin/MenuApp.swf"
mxmlc 'bin/MenuApp.swf' do |t|
  t.input                    = "src/MenuApp.as"
  t.debug                    = false
  t.optimize                 = true
  t.default_size             = '540 436'
  t.default_background_color = "0x000000"
  t.library_path     << "lib/corelib.swc"
  t.source_path      << "config/environments/production"
  t.define           = "CONFIG::production,false
  t.title            = "'My Project'"
  t.description      = 'My Menu App'
  t.link_report      = 'menu_report.xml'
end

After your task has been added it should now be listed when you run rake -T

 
rake -T
> rake menu                     # Menu App
 

Now run the task by it's name.

 
rake menu
 

You should see the mxmlc command execute. Note that your new swf will not be opened up like the rake debug task.