millerrok/outstream

Outstream initer for VPAID unit

Outstream VertaMedia Ad Player

Outstream VertaMedia Ad Player is a plug-in for playback of commercial video on the page. Please, take into account, that after initialization of the player, video playback is started automatically

Install

Include js file to

    <script type="text/javascript" src="/path/to/lib/dist/outstream.js"></script>

Initialization:

You can initialize this Ad Player in two ways:

• by adding HTML markup to your page layout
• directly by creating an Outstream object in your JS application

Adding HTML markup

Add script tag anywhere to the page layout.

Example:

  <script data-outstream-aid="13694" data-outstream-width="400" data-outstream-mode="flash js" data-outstream-height="300" src="dist/outstream.js"></script>

You are able to customize a player to suit your needs. Please, use the attribute data-outstream- for redefining options by default. List of available Player options are presented below.

Adding HTML markup

As soon as you've got all files downloaded and included in your page you just need to call constructor:

  new Outstream({
      aid: 13694,
      width: 400,
      height: 300,
      VPAIDMode: ['flash', 'js']
      containerEl: document.getElementById('ad-container')
  })

List of available Player options are presented below:

Player options:

Constructor parameter/type	Tag parameter	Default value	Description
aid:number	data-outstream-aid		User's aid for play Ads
width:number	data-outstream-width	400	Width for outstream container
height:number	data-outstream-height	400	Height for outstream container
containerEl:DOM object	none		DOM element should be presented and contain an unique identifier. Example ` `
isSSP:boolean	data-outstream-SSP		Options for selection: vast.vertamedia.com (SSP account) or vast.videe.tv (Videe.TV account (is used by default))
VPAIDMode:array	data-outstream-mode		Used for set of the VPAID mode. Options are: ['js'] or ['flash]. If some mode is not supported by browser it possible to set stack of modes. When one mode is not supported it will be use next from stack ['js','flash'] or ['flash','js]. Custom stack is ['flash','js]. When tag parameter used - for separation of modes space should be used

Events:

Event Name	Description
loaded	On ad is loaded
error	On ad has some error
impression	On ad impression event (only for jsVPAID)
complete	On finish play ad
started	On ad start play
resumed	on resumes the current ad
paused	On ad is paused
mute	On ad volume muted
unmute	On ad volume unmuted

    var outstream = new Outstream({
         // some settings here ...
    })

    outstream.on('load',function(){
        // code ...
    });

Methods:

on()

Subscribe for Outstream event

off()

Unsubscribe from Outstream event

destroy()

Destroy Outstream containerEl content

startAd()

Starts playing Ads

stopAd()

Stops playing Ads

mute()

Mutes Ads

unmute()

Unmutes Ads

skipAd()

Skips Ad which currently plays

getAdVolume()

Returns volume value

setAdVolume(val)

Sets Ads playing volume. Value`s parameter: from 0 to 1

pauseAd()

Stops playing Ads

resumeAd()

Resumes playing Ads

resizeAd(width : Number, height : Number, viewMode : String)

Sets new size for Ads view

Flash mode is supported :

IE from ie7
Chrome
FireFox
Safari

JS mode is supported :

IE from ie9
Chrome
FireFox
Safari