This plugin is built upon the VideoJS/VideoJS-SWF repo. It contains extra code allowing it to fetch VPAID information from a URL and load it over the VideoJS video wrap. I decided to turn this into a VideoJS Plugin, rather than VideoJS Tech simply because it seemed the easiest to execute and remove once it is over.
Currently Working:
- LiveRail VPAID ad examples
- Brightroll VPAID ad example
- VPAID Debug Log
Working examples can be found within the /demo/ folder of this repo, and can be viewed locally within your browser. You can also enter your own VPAID URL and Parameters to test out your own ads and ensure they work. This plugin currently uses VideoJS v4.11.4, it is not the most recent, but in my opinion seems the most stable and still flexible for other plugins, such as Closed Captioning and Resolution Switch to work.
The source code for the videojs-vpaid.swf file is available and can be editted to your liking, down the road I'll remove extra junk that doesn't need to be in there to trim
it down. For now, however, it works as it is. Feel free to submit any issues or ask any questions that arise, it should be faily straight forward as this has an easy setup.
I am available via Twitter for direct questions or feedback, my handle is @Manbearpixel. Thanks for checking this repo out! Please view the What's New section for most up-to-date additions to this plugin!
- Install Node Packages.
npm install- Compile JS Library AND SWF Plugin
grunt dist- Create the local server
grunt connect:dev- Open your browser at http://localhost:8888/demo/ to view the VPAID Demo page. You can keep using grunt taks to rebuild the JS Library (written in CoffeeScript) and Flash SWF file without restarting the server.
When setting up the plugin you will need to give vjsVPAID the following information:
Type: string
This is the path to the videojs-vpaid.swf file generated from grunt mxmlc.
Type: string
This is the path to the VPAID XML file. As of v1.0.1 you can now add parameters within the vpaidUrl. Such as the following example: http://adsite.com/vpaid-ad.xml?param1=foo¶m2=bar¶m3=meme
Type: boolean
Setting this flag to true will tell the VideoJS VPAID Plugin to emit information to the console.log, useful for testing out or debugging issues
that may arise.
Type: integer
As of v1.0.2 you can now specify the length of an ad timeout. This causes the ad to fail silently if the ad response takes longer than that specified. By default it will timeout after 5 seconds. You may also disable this completely by setting the value to -1:
vjsVpaid: {
...
timeout: 6000 // or -1 to disable
}player = videojs("player", {
controls: true,
autoplay: false,
...,
plugins: {
vjsVPAID : {
vpaidSWF : '/dist/videojs-vpaid.swf',
vpaidUrl : 'http://site.com/path-to-vpaid.xml?timestamp=12334824&ref=http://refsite.com/sitepath&foo=bar',
debug : false
}
}
});Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///). To get around this you can do either of the following:
- Do your development and testing using a local HTTP server. See above for instructions on using simple-http-server for this purpose.
- Disable the version of Flash included with Chrome and enable a system-wide version of Flash instead.Gruntfile.js
As noted, there is a current implementation to have the ad fail after a specified amount of time. Prior to this version it was hardcoded to 5 seconds, with this update you can now specify your own timeout (in ms), or disable it all together. If it is not specified it will default to 5 seconds.
vjsVpaid : {
...
timeout: 6000
}vjsVpaid : {
...
timeout: -1
}I have added new events to be triggered and available to be listened to by VideoJS. You can find the complete list of events in the working demo, but here is a quick list of all possible events. Please note that each will be prepended with vpaid_ :
- AdStarted
- AdLoaded
- AdClickThru
- AdTimeoutError
- error
- AdVideoFirstQuartile
- AdVideoMidpoint
- AdVideoThirdQuartile
- AdComplete
- AdPlaying
- AdPaused
This plugin is written in CoffeeScript and should be maintained in it. When building the JS library any changes written in the .js file will be overwritten, so be careful!
VideoJS-VPAID plugin no longer requires the need to include both the adUrl, and adParams as two separate variables/options. I have configured a way to just pass a VPAID Url including any additional params to be successfully passed and used by the SWF.
player = videojs("player", {
controls: true,
autoplay: false,
...,
plugins: {
vjsVPAID : {
vpaidSWF : '/dist/videojs-vpaid.swf',
vpaidUrl : 'http://site.com/path-to-vpaid.xml',
vpaidParams : 'timestamp=123456789',
debug : false
}
}
});player = videojs("player", {
controls: true,
autoplay: false,
...,
plugins: {
vjsVPAID : {
vpaidSWF : '/dist/videojs-vpaid.swf',
vpaidUrl : 'http://site.com/path-to-vpaid.xml?timestamp=12334824&ref=http://refsite.com/sitepath&foo=bar',
debug : false
}
}
});Additionally, I have added new Grunt tasks for building the JS Library and SWF file to hopefully make things simpler. If you currently have this repo cloned, you will need to run npm install to download the additional Grunt Plugins the tasks now use.
grunt build-lib grunt build-lib:1
or
grunt build-lib:true grunt build-swfThis basically combines both build-lib:1 and build-swf.
grunt dist- 1.0.0: Initial release, stable
- 1.0.1: Removed need to have params split from url, added new Grunt tasks
- 1.0.2: Added support to configure ad timeout, Added new event triggers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent