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.

Watch Neil Heddings skateboarding in Sports  |  View More Free Videos Online at Veoh.com

Watch Neil Heddings in Sports  |  View More Free Videos Online at Veoh.com

To display an image for 2 seconds before your video starts you'll need to use a TemporalProxyElement to apply a duration to your ImageElement.

 
var temporalProxyElement:TemporalProxyElement
     = new TemporalProxyElement(2,
				               new ImageElement(new ImageLoader(),
					       new URLResource(THUMB_URL))
					      );
 

Full Code

 
package {
	import flash.display.Sprite;
 
	import org.osmf.composition.SerialElement;
	import org.osmf.containers.MediaContainer;
	import org.osmf.image.ImageElement;
	import org.osmf.image.ImageLoader;
	import org.osmf.layout.LayoutUtils;
	import org.osmf.media.DefaultMediaFactory;
	import org.osmf.media.MediaElement;
	import org.osmf.media.MediaFactory;
	import org.osmf.media.MediaPlayer;
	import org.osmf.media.URLResource;
	import org.osmf.proxies.TemporalProxyElement;
	import org.osmf.utils.URL;
 
	[SWF(width="400", height="300", frameRate="25")]
	public class ShrelpBurst extends Sprite
	{
		private var mediaFactory:MediaFactory;
		private var mediaElement:MediaElement;
		private var mediaPlayer:MediaPlayer;
		private var mediaContainer:MediaContainer;
 
		private static var VIDEO_URL:URL = new URL("http://www.marinelayerproductions.com/_uploads/news/portugal_killer_heat.flv");
		private static var THUMB_URL:URL = new URL("http://www.marinelayerproductions.com/_uploads/news/large/midnight_blue_04_00000.jpg");
 
		private var _pause:Sprite;
		private var _play:Sprite;
 
		public function ShrelpBurst()
		{
			mediaFactory = new DefaultMediaFactory();
			var serialElement:SerialElement = new SerialElement();
			var temporalProxyElement:TemporalProxyElement = new TemporalProxyElement(2,
																	new ImageElement(new ImageLoader(),
																	new URLResource(THUMB_URL))
																	);
			serialElement.addChild( temporalProxyElement );
			mediaElement 		 = mediaFactory.createMediaElement( new URLResource(VIDEO_URL));
			serialElement.addChild( mediaElement );
 
			mediaPlayer 		 = new MediaPlayer();
			mediaPlayer.autoPlay = true;
			mediaPlayer.media 	 = serialElement;
			mediaContainer 		 = new MediaContainer();
			mediaContainer.addMediaElement( serialElement );
 
			addChild( mediaContainer );
 
			LayoutUtils.setAbsoluteLayout(mediaElement.metadata, 400, 300, 0, 0);
		}
 
	}
}
 

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

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

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.

Watch Matt Moffett Skateboarding in Sports  |  View More Free Videos Online at Veoh.com

Street Moffett

Ramp Moffett

Watch Matt Moffett Skateboarding in Sports  |  View More Free Videos Online at Veoh.com

On the left Ramp Moffett

On the right Street Moffett

That was round one, leave your vote in the comments and pass the link on to a friend.

Watch Rune Glifberg Skateboarding in Sports  |  View More Free Videos Online at Veoh.com

Watch Rune Glifberg Skateboarding 2 in Sports  |  View More Free Videos Online at Veoh.com

Watch Neil Heddings skateboarding in Sports  |  View More Free Videos Online at Veoh.com

Watch Neil Heddings in Sports  |  View More Free Videos Online at Veoh.com

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>
 

 
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.

We'll start by creating a new variable in our rakefile like this. Since this number will always show up when you run rakeI prefixed it with dev so my local build will never get confused others.

 
build_number = '"\'dev.1.1.1.1001\'"'
 

Quark #1. It took me a few tries to get the quotes right. Since this var is passed through a command shell then into the mxmlc the triple quotes are necessary. If you don't you will be likely to see some strange results and your swf just not compiling at all. If you use the string above and just replace dev.1.1.1.1001 you should be in good shape.

The next step it to add our version number to either the project model or a task via the define method. I decided to add the define method to the task since I would need to change the production variable for the deploy task.

 
desc 'Compile and run the application for debugging'
debug :debug do |d|
  d.define = "CONFIG::production,false -define=CONFIG::version," + build_number
end
 
desc 'Compile and run the test harness'
unit :test do |d|
  d.define = "CONFIG::production,false -define=CONFIG::version," + build_number
end
 
desc 'Compile for deployment'
deploy :deploy  do |p|
  p.define = "CONFIG::production,true -define=CONFIG::version," + build_number
end
 

Did you notice how I'm passing multiple variables in the same line? This is because the define method can't be called more then one time. It doesn't look like this is by design and might be a little bug in the task. Getting around this is easy enough. You just need to append "-define=" for all other variables.

This next snippet is the ActionScript 3.0 code demonstrates how to access your variable.

 
package {
  class Constants {
    public static const VERSION:String        = String(CONFIG::version);
    public static const IS_PRODUCTION:Boolean = CONFIG::production;
  }
}
 

Now that you have these lines of code in your project the next time you try to run AsDoc everything is going to melt down. AsDoc is very finicky and doesn't like the CONFIG variable. I was able to get around this by using a c preprocessor to remove these lines before AsDoc executes.

Finally you'll want to have your continuous integration system insert the correct version number. For example I have Hudson use sed to insert the correct version number.

 
sed -i 's/dev.1.1.1.1001/{RELEASE_NUMBER}/' rakefile.rb
 

And now you never have to manually update version numbers again!

If your using Flex to profile your application you will have to add these additional compiler arguments to the project properties.

 
// ==UserScript==
// @name           VideoTweet
// @namespace      com.spooner.videoTweet
// @description    Twitter Video Comments
// @include        http://youtube.com/watch?*
// ==/UserScript==
(function()
{
	function create(htmlStr) {
	    var frag = document.createDocumentFragment();
	    var temp = document.createElement('div');
	    temp.innerHTML = htmlStr;
	    while (temp.firstChild) {
	        frag.appendChild(temp.firstChild);
	    }
	    return frag;
	}
 
    var primaryCollection;
	try {
		  	primaryCollection = document.getElementById("watch-vid-title").childNodes[3].innerHTML;
	} catch(e) {}
 
	if(primaryCollection)
	{
	    var fragment = create('
<div id="videoTweet"><iframe src="http://search.twitter.com/search?q=' + escape(primaryCollection) + '" width="100%" height="200" ></iframe></div>
 
')
		document.body.insertBefore(fragment, document.body.childNodes[0]);
	}
 
})();
 

Results: In this graph we can see an immediate 25% decrease in the bounce rate. The orange line shows the bounce rate is know skewed due to an increase of traffic at the site launch. The blue line shows the drop in the user bounce rate. I attribute this improvement to the sites navigation improvements. Visually the navigation is broken up into two consistent visual elements giving the user a familiar tool. Functionally this site improves the user experience by showing state in the address bar and having working forward/back buttons.

This graph compares the average time on site "Orange" improved by 2 minutes and bounce rate decreasing by 25%.

Check out the article
Veoh to Bring Behavior to Video Ads

1. Bookmarks
2. Mark Occurrences. Highlight/SidebarMarkers
3. Find Next/Previous
4. Apple + Option + Up/Down Arrow Duplicate line
5. Apple + D Delete current lines.
6. Apple + Shift + R Open Resource like TextMate's find in project.
7. Apple + K Go to next occurrence
8. Apple + Shift + K Go to previous occurrence
9. Use Flash Components in Flex ActionScript Project.
   Directions from the ActionScript 3.0 Cookbook or see Colin Moock's post

asdoc -doc-sources /Users/jspooner/Documents/veoh/FlashPlayer/branches/ActionScriptSDK/src/com/veoh -output /Users/jspooner/Documents/veoh/FlashPlayer/branches/ActionScriptSDK/docs/

svn copy $R/trunk $R/branch/feature1

Okay if your sold on Environmental Variables this is how you do it.

1. Look in "/Users/your-user-name" for a .profile or .bash_login file. If you have both then open up .bash_login or if you have neither create a .profile file.
2. In that file you can use the export command to set all the variables you need. Each of these variables should be in uppercase.

   export W=/Users/jspooner/Documents/veoh/FlashPlayer/branches/wolverine
   export T=/Users/jspooner/Documents/veoh/FlashPlayer/tags
   export B=/Users/jspooner/Documents/veoh/FlashPlayer/branches
   export SVNROOT=http://repo/svn/src/FlashPlayer/
   

You can also use alias and functions to do other task like open and close projects. Here are some of the other shortcuts I have.

## Open my current project
alias wolverine="cd /Users/jspooner/Documents/veoh/FlashPlayer/branches/wolverine && pwd && echo WELCOME TO WOLVERINE"
# mate
alias edithost="mate /private/etc/hosts"

alias stopmysql="sudo launchctl unload -w /Library/LaunchDaemons/com.mysql.mysqld.plist"
alias startmysql="sudo launchctl load -w /Library/LaunchDaemons/com.mysql.mysqld.plist"
#
# # functions
# # change directories. echo PWD and show a list
cdd () { cd ${1}; echo $PWD; ls; }

If your having issues and had Flex Beta installed check out these instructions from adobe. The worked for me when upgrading from Beta 2 to Beta 3.

Embedded Video

Tags: rubyon rails, video

What is a host file? Lets say your editing website locally and would like to bypass any security errors caused by the localhost url. You can use the host file to redirect the real url "www.jonathanspooner.com" to point at your local copy.

I also added a short cut to my profile document so I can just type 'host' in terminal and TextMate will open the doc.
To do this create a file named .profile in your users directory "/Users/yourusername/" and bash script like the one below. I have a few other handy shortcuts in there too.

alias host="mate /private/etc/hosts"

Google search for Rocky Dennis.

Go digg the post

" I sent you a mulimedia message. You can view my message via the internet at viewmymessage.com using Msg ID w392gvgmn Password ors9vhem"

If that isn't horrible user experience look at the website where you can read your message. They have about an 800 pixel wide
page and they squish the message into a 150 pixel wide box at less than 8 point type.

Yeah, Congratulations AT&T, you guys rock!

Yikes! I need to find a good solution that is packaged up and ready to go.

I have since installed the whole RoR set up on a MediaTemple DV server. The process wasn't that bad. You can see how to do it here. I was able to follow their directions and get it to work first try.

In the mean time I decided to launch a small application on Rails just to get the process down before deploying a larger app. There's all this talk that it won't scale and crap like that. I want to see for myself. So the app is called linkrook.com and it's a simple long url redirect program. Check it out!

What do I think of Ruby on Rails now?
I still love it. I'm not a CS guy, just a guy that went to art school and learned ActionScript. OOP is the way to go and PHP drives me crazy, it's soo messy. RoR helps you do things correctly with version control and clean objects... I could go on and on. Yes it took a bit to get servers set up. Much of that is because MediaTemple's GridServer has their own mtr commands instead of capistrano.

What Challenge is next?
Getting the ActiveRevver Model to work on Rails 1.2.3. Anyone want to give me any thoughts on how to do so?
My other option is to just use the XML-RPC from Revver. I'm just not exactly sure how to structure each xml request. Revver showes the api but I'm just not quite sure how to use the xml-rpc in ruby. I'll have to investigate more.

Resources I have found
http://del.icio.us/jspooner/rails
http://del.icio.us/jspooner/rails_deploy

Big thinks to Chris at Assay Deopt for helping me with Capistrano. Check out his developer blog for some good RoR stuff.

Here is a link to the bug at php.net

Wordpress uses xmlrpc and there is a hack to correct the bug. The fix is to add the following line at the top of thte xmlrpc.php file.

$HTTP_RAW_POST_DATA = file_get_contents("php://input");

I'm looking for a fix to the revver video api. If you find something let me know.
I'll update this post when I find the fix too.

Is this good functionality? Are people really unable to dial the phone number their selves? I think click-to-call is a good way to boost your phone call conversions. Hey and it also lets us web people track how many people make that call.

You can read more here.
Yardley

I just updated Dreamweaver to version 8.0.2 and there is not an option to not rewrite document relative paths. From your manage sites menu select a site to edit. In the bottom of the left column click on templates. You will want to then uncheck the checkbox that says "Don't rewrite document relative paths".

Matisyahu

The purpose of this beta test is to make sure that all previous flash sites still work in the new player. Go get it and participate.

Macromedia - Flash Player : Macromedia Flash Player Public Beta

I thought that I would have all of this free time once I gradguated but it has been quite the opposite. I have been working with ActionScript 2.0 a lot lately. I also found all of the seceret objects such as the movie_mc.tween() and movie_mc.scaleTo(); The rumor is that they will all be released in version 8. I also just installed the beta version of the Flash Player 8 ( Maelstorm ). Go get it for your self.