JQuery Image Zoom Plugin
Sunday, March 7th, 2010I recently posted the code for my jquery image zoom plugin here.

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

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.

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