Placements are entities representing “real-estate spaces” on screen, i.e. HTML elements into which we render ads. Placement entities connect channels to custom placements on any site utilizing CSS selectors and allow customization of the placement’s behavior when showing AniView instream or outstream players.
| Table of Contents |
|---|
...
Placement Element
The player is created on an element id specified by placementConfig.position:
| Code Block | ||
|---|---|---|
| ||
<div id=" |
...
aniplayer" |
...
></div> |
Placement Configuration
The configuration of the placement is a configuration object with properties that instruct the placement on how to handle the placement element and render the correct ad.
For example:
| Code Block | ||
|---|---|---|
| ||
var placementConfig = {
publisherId: '[Publisher_ID]',
channelId: '[Channel_ID]',
ref1: '',
width: 300,
height: 250,
autoPlay: true,
loop: true,
vastRetry: 3,
errorLimit: 5,
soundButton: true,
pauseButton: true,
preloader: {
type: '',
link : '',
clickthrough: '',
},
midRollTime: 2,
position : 'aniplayer'
}; |
Player Javascript
The player code is located at https://player.aniview.com/script/6.1/aniview.js
Player Instantiating
| Code Block | ||
|---|---|---|
| ||
myPlayer= new avPlayer(adConfig);
myPlayer.play(); |
Putting it all together
| Code Block | ||
|---|---|---|
| ||
<div id="aniplayer"></div> <script type="text/javascript" id="aniviewJS"> (function() { var myPlayer; var adConfig = { publisherId: '[Publisher_ID]', channelId: '[Channel_ID]', ref1: '', width: 300, height: 250, autoPlay: true, loop: true, vastRetry: 3, errorLimit: 5, soundButton: true, pauseButton: true, preloader: { type: '', link : |
...
'', clickthrough: |
...
'', }, midRollTime: |
...
2, position : 'aniplayer' |
...
}; (new |
...
Image).src = "https://track1.aniview.com/track?pid="+adConfig.publisherId+"&cid="+adConfig.channelId+"&e=playerLoaded"+"&cb="+Date.now(); var PlayerUrl = 'https://player.aniview.com/script/6.1/player.js'+'?v=1&type=s&pid='+adConfig.publisherId; |
...
function downloadScript(src,adData) { |
...
|
...
var scp = document.createElement('script'); scp.src = src; scp.onload = |
...
function() { myPlayer= new avPlayer(adData); myPlayer.play(adConfig); |
...
Configuration Concept
Player Location
There are two options for the player location
https://player.avplayer.com/script/8/v/avcplayer.jsThis player will always be updated to the latest versionhttps://player.avplayer.com/script/2/2.54/avcplayer.jsThis will point to a specific version. It's up to the customer to upgrade to a later release as needed
adConfig
Default adConfig is defined in config.adConfig. This configuration is used by default for all ads in the player.
In “default“ mode it's possible to define a specific configuration per slot that will override the default adConfig - example below
Ads Mode
The ads mode defines how the content player works with ads
breakingAdsMode: Ads configuration mode
...
“os“: In this mode, the player runs the ad module and whenever an ad is available it will break and pause the content.
In this mode, only the default adConfig is used and slots configuration is ignored.
There are multiple ways to control the aggressiveness of the player such as impCap per content, breakingAds: 10 that will create an interval between waterfall runs, and additional ad player configurations.
...
“op“: In this mode, a player will allow ads as defined in the configuration of the slots. A player will use only the default adConfig.
The advantage of this mode is that it will precache and use ads found in one slot on the next slot while the default mode below will work like vpaid, meaning it will load the ads module separately for each slot and will dump unused ads.
In this mode breakingAds must be set to false.
“default“: in this mode, the defined slots define the time when ads are called. Each slot may have its time and timeout. As well, it is possible to define for each slot the channel that will be used and the adConfig configuration
| Code Block |
|---|
config: {
adConfig: {
//Default ad config to be used in all slots
},
content: {
contents: [{
//Content configuration
slots: [{
adConfig:{
//All relevant ad config parameters specific to this slot
//This will override the default adConfig
},
time: 0
}]
}]
}
} |
In default mode, breakingAds must be set to false: breakingAds : false
...
breaking ads: This parameter is relevant only if breakingAdsMode - “os“. for example, breakingAds: 10
breaking ads define the time interval between ads - it's similar to midrollTime in the ads player.
Slots Configuration
Slots define the time where we want the ad to appear. In each slot, the time of the ad is defined.
Time: 0 means pre roll. This means that we will search for ads for the configured timeout and will display an ad (if available) before the content.
Slots configuration is relevant only in default and op modes. In OS mode slots are ignored.
Each slot can define the number of ads that we want to show in the slot (v 2.54 and above)
In midroll slots, the time is the desired time (seconds) of the ad slot relative to the content time. The actual time when the ads will appear can be slightly different as we are not pausing the content and there may be some timeout of the ad to start
There are multiple ways to define slots:
slots array per content
commonSlots: commonSlots is an array of slots that will be used for all slots.
commonSlots are merged with each content slotsfirstPrerollSlot: Slot definition for the first preroll slot in the session: This slot configuration is used as is in the first preroll slot of the session. It will override any existing configuration of the first slot if exist.
In order to implement a session with 2 ads in the first preroll, 2 post rolls, and 2 prerolls in the next contents the following configuration can be used:
| Code Block |
|---|
firstPrerollSlot: {
"time": 0, //Slot time, 0 is preroll
"nextAdTimeout": 6, //If more than one ads in the slot, the timeout for the second ad
"preloadAdTime": 10, //Timeout for the first ad in the slot
"maxAds": 2 //Maximum number of ads in the slot
},
commonSlots: [{
"time": 0,
"nextAdTimeout": 8,
"preloadAdTime": 15,
"maxAds": 4 //2 as postrolls 2 as prerolls of the second content and on
}] |
Configuration Options
...
Variable
...
Type
...
Description
...
adConfig
...
Object
...
Default adConfig for ads
...
position
...
String
...
The div id where the player should be positioned
...
width
...
Number
...
The width of the player.
If width is 100 and height is 0, the player automatically adopt to the space available
...
height
...
Number
...
The height of the player
...
minHeight
...
Number
...
Minimum player height
...
maxWidth
...
Number
...
Maximum player width
...
autoPlay
...
Boolean
...
Start playing automatically or wait for click on the play button
...
autoLoop
...
Boolean
...
Automatically restart playlist when it ends
...
autoContinue
...
Boolean
...
Auto continue to next content when the content ends
...
showReplay
...
Boolean
...
Show or not the replay button when playlist ends (and autoLoop is false)
...
replayText
...
String
...
Text to show with replay button
...
showTitle
...
String
...
Where to show the content title.
Possible values - left/right
...
title
...
Object
...
Show title even in 180px-300px
...
title.position
...
String
...
x-y-z e.g. bottom-right-middle
...
caption
...
Object
...
Note: only works if captionBgColor is defined!
A text caption/label at the top of the player with text, color and textAlign, e.g.:
{text: "ADVERTISEMENT", color: “red”, textAlign: "center"}
...
captionBgColor
...
String
...
A color for text caption/label (even if caption is not defined, i.e. empty) at the top of the player
...
content
...
Object
...
Content object
...
content.order
...
Number
...
0: Order of content according to configuration
1: random
...
content.randomFrom
...
Number
...
If order is 1, randomize from the content defined
...
content.breakingAds
...
Number/false
...
false: No breaking ads
Must be false with breakingAdsMode “op“ and “default“Number: Defines midrollTime - time between running the waterfall
Mast be set with breakingAdsMode: “os“
...
content.breakingAdsMode
...
String
...
Ads mode of the player:
See above for detailed info
“os”: The player runs the ad module and whenever and ad is available it will break and pause the content
“op“: (Recommended) The player will search for ads and start the ads as defined in the slots configuration.
“default“: The player will search for ads and start the ads as defined in the slots configuration.
...
content.impCap
...
Number
...
Max number of ads allowed in the player
...
content.contents
...
Array
...
Array of video content elements
...
content.contents[].id
...
String
...
Unique id of the content
...
content.contents[].url
...
String
...
Url of video to play
...
content.contents[].fallbackUrl
...
String
...
Optional fallback url of video. Typically used with hls videos and will be used if hls video fails to play
...
content.contents[].clickThrough
...
String
...
If defined, when clicking on the video it will open this url
...
content.contents[].type
...
String
...
Must be “video“
...
content.contents[].impCap
...
Number
...
Max number of impressions for this video
...
content.contents[].slots
...
Array
...
Array of slots configuration for this video. Used only with “op“ and “default“ breakingAdsMode
...
content.firstPrerollSlot
...
Object
...
Slot configuration for the first preroll in the player
...
content.commonSlots
...
Array
...
Array of slots configuration that is used for all contents. Will be merged with slots defined per content if any
...
content.contents[].slots[].adConfig
...
Object
...
adConfig for the specific slot. Used only with “default“ mode, replace slots with commonSlots[] or firstPrerollSlot
...
content.contents[].slots.time
...
Number
...
Time in seconds when we want to play the ad. 0 for preroll, replace slots with commonSlots[] or firstPrerollSlot
...
content.contents[].slots.preloadAdTime
...
Number
...
V2.54 and above
Timeout in sec for first ad in the slot
use content.contents[].slots.timeout in previous versions, replace slots with commonSlots[] or firstPrerollSlot
...
content.contents[].slots.nextAdTimeout
...
Number
...
V2.54 and above
Timeout in sec for next ads in the slot. Relevant only if maxAds bigger than 1, replace slots with commonSlots[] or firstPrerollSlot
...
content.contents[].slots.maxAds
...
Number
...
V2.54 and above
Max number of ads in the slot, replace slots with commonSlots[] or firstPrerollSlot
...
floating, sticky
...
Object
...
floating or sticky configuration
floating: The player floats when not in view
sticky: The player floats all the time
...
floating.resize
...
Boolean
...
If true, the floating resize the player and not using scale
...
floating.size
sticky.size
...
Number
...
The resize scale of the floated player. 0-1
With sticky set to 1
...
floating.floatOnBottom
...
Boolean
...
Float the player also when the player is below the view. Relevant only to floating
...
floating.position
sticky.position
...
String
...
Can be one of: “bottom-right“, “bottom-left“, “top-right“, “top-left“, “top”, ”bottom”
...
floating.closeButton
...
Boolean
...
Show close button on floating player
...
floating.left
sticky.left
...
Number
...
Margin from the left of the screen
...
floating.right
sticky.right
...
Number
...
Margin from the right of the screen
...
floating.top
sticky.top
...
Number
...
Margin from the top of the screen
...
floating.bottom
sticky.bottom
...
Number
...
Margin from the bottom of the screen
...
floating.textFont
...
String
...
Set the font for the text, make sure showTitle is set.
Relevant for floating.position: top/bottom
...
floating.textColor
...
Object
...
Set the text color, options are Black/White, make sure showTitle is set.
Relevant for floating.position: top/bottom
...
floating.backgroundColor
...
Object
...
Set the background color, options are Black/White, make sure showTitle is set.
Relevant for floating.position: top/bottom
...
floating.textSize
...
Number
...
Set the text size, make sure showTitle is set.
Relevant for floating.position: top/bottom
...
floating.floatOnView
...
Boolean
...
Start floating only when in view.
...
showBigPlay
...
Boolean
...
Show big play button
...
showBigPlayOnPause
...
Boolean
...
Show or not the big play button when the player is paused
...
showBigPrevNextOnPause
...
Boolean
...
Show or not the prev and next buttons when the player is paused
...
soundButtonPosition
...
String
...
The position of the sound button on the controls bar. Can be “left“ or “right“
...
showPauseButton
...
Boolean
...
Show or not the play/pause button on the control bar
...
showPrevButton
...
Boolean
...
Show or not the prev button on the control bar
...
showNextButton
...
Boolean
...
Show or not the next button on the control bar
...
showBigPrevNext
...
Boolean
...
Show or not the big prev and next buttons
...
showSoundButton
...
Boolean
...
Show or not the sound button at the control bar
...
showVolumeControl
...
Boolean
...
Show or not the volume control on the control bar
...
volumeControlVertical
...
Boolean
...
Show vertical or horizontal volume control bar
...
durationPosition
...
String
...
Video duration position in the control bar. Can be “left“ or “right“
...
showDuration
...
Boolean
...
Show or not the video duration
...
showTimelineReplay
...
Boolean
...
Show or not the replay button on content/playlist end
...
showFullScreen
...
Boolean
...
Show or not the full screen button
...
hideGuiOnMouseout
...
Boolean
...
In desktop, hide or don’t hide play gui when mouse is out of player area
...
hideGuiTimeout
...
Number(2)
...
In mobile, number of sec to wait before hiding timeout after first click on UI
...
timelineMode
...
String
...
Default: Show default timeline
Bottom: Timeline is shown on the bottom of the control bar
None: No timeline
...
spinner
...
String
...
Default: Show circle spinner
Dots: Show dots spinner ...
None: Dont show spinne
...
theme
...
String
...
Default: Control bar has grayed background
Solid: Control bar has no grayed background
...
themeColor
...
String
...
Color code for controls
...
logo
...
Object
...
Custom logo info
...
logo.url
...
String
...
URL of logo png
...
logo.text
...
String
...
Text to show with the logo
...
logo.size
...
Number
...
Size in pixels of the logo
...
logo.position
...
String
...
Position of the logo. Can be: “top-left“, “top-right“
...
startVolume
...
Number
...
Start volume. With autoPlay: true must be set to 0
...
syncVolume
...
Boolean
...
Sync ads and content volume
...
startMode
...
Object
...
Prevent the player to load content before it have an imprssion.
Relevant for mode “OP” with preroll and mode “OS”
Adds functionality to the player when it opens.
By not adding more flags the player will show the poster of the first content until an impression will occur or the play button will be pressed, in case there is no poster it will show a black screen.
...
startMode.mode
...
String
...
For now, supports only "WaitForAd", it’s a must variable for the configuration
...
startMode.hidden
...
Boolean
...
The player will be hidden and will open only if it got an impression, when opens it will open growing height animation.
...
startMode.openAnim
...
Boolean
...
Supports the “hidden” flag and will make the player open with animation
...
startMode.showPlayer
...
Boolean
...
Always open the space of the player, even if the player is hidden
...
startMode.noFloat
...
Boolean
...
When the poster is shown, and the player is with floating configuartin, the player won’t float until an impression will occur or the play button will be pressed.
...
startMode.playButtonDelay
...
Number
...
In case there is no impression the play button will appear after “playButtonDelay” seconds.
By pressing it the content video will start
...
autoSkip
...
Object
...
Activate the auto skip functionality, after 20 seconds a skip button with a filling bar for 10 seconds will appear. If any gesture on the player won’t accrue, the player will skip the content. It is also possible to click the next button to skip immediately.
Relevant for mode “OP” only
...
autoSkip.text
...
String
...
Set custom text for auto skip button
...
autoSkip.time
...
Number
...
Default is 30 seconds, the end time in which the player will skip
...
autoSkip.timeout
...
Number
...
Default is 10 seconds, the timeout in which the auto skip will appear before the autoSkip.time
...
passback
...
Object
...
Allows to close the player and open an iframe instead
...
passback.url
...
String
...
For non txt passback.type:
Link to the file that contain the passback code
For txt passback.type:
Uses it as a string to output
...
passback.width
...
Number
...
Width of passback iframe. Default 100%
...
passback.height
...
Number
...
Height of passback iframe. Default 100%
...
passback.color
...
String
...
Background color. default "#000"
...
passback.type
...
String
...
Options: ‘script' | ‘html' | 'txt' - Type of the passback file. Default "script"
If it’s txt, it treats passback.url as a string and just outputs what is there, for example passback.url = 'this is a test’;
...
passback.mode
...
String
...
Options: 'Immediate' | 'OnContentEnd' | 'OnPlaylistEnd'
"Immediate" - after error limit
"OnContentEnd" - after error limit + end of current content
"OnPlaylistEnd" - after error limit + end of playlist
...
showQualityTracks
...
Boolean
...
Set true to enable the option to choose different video qualities
...
readMoreButton
...
Object
...
Control the Read More button
...
readMoreButton.enable
...
Boolean
...
Can change to false from the default true
...
readMoreButton.label
...
String
...
Changes the text for readmore
...
readMoreButton.preventOtherClickThrough
...
Boolean
...
Can change to true from the default false in order to make only the Read More lead to the landing page as opposed to the entire player
...
readMoreButton.position
...
String
...
Can change the default (bottom-right) into center, center-bottom (the former two are identical) or bottom-left
...
Capturing events is done by using the following API
player.on(“event name“, callback);
...
Event list
...
AdSkipped
...
AdRemainingTimeChange
...
AdVolumeChange
...
AdSizeChange
...
onFloatingChanged
...
AdImpression
...
AdViewableImpression
...
AdVideoFirstQuartile
...
AdVideoMidpoint
...
AdVideoThirdQuartile
...
AdVideoComplete
...
AdClickThru
...
AdPaused
...
AdPlaying
...
AdError
...
Inventory
...
InventoryRequest
...
ContentVideoStart
...
ContentVideoFirstQuartile
...
ContentVideoMidpoint
...
ContentVideoThirdQuartile
...
ContentVideoComplete
...
ContentPaused
...
ContentPlaying
...
ContentClickThru
...
ContentNextClicked
...
ContentPrevClicked
...
ContentPlayClicked
...
ContentPauseClicked
...
CloseClicked
...
CloseFloatingClicked
Impression Data
AdImpression event provides extra data about each impression, such as the impression CPM
For new players:
| Code Block |
|---|
player.on("AdImpression", function(event, eventData){
}); |
For existing players in Post Start override function:
| Code Block |
|---|
p.on("AdImpression", function(event, eventData){
}); |
eventData contains the following data
...
Attribute
...
Type
...
Description
...
content
...
Object
...
Info about the content that is currently running
Same info that is passed in config.content.contents[i]
...
p1
...
Object
...
Ad impression information
{ 2 "asid": "Ad source id", 3 "clickThrough": "Ad click url if available", 4 "videoUrl": "Url of media file if available", 5 "mt": "Media type, vast or vpaid", 6 "tagInfo" : { 7 "url": "Actual ad source meta data, template of url", 8 "bidCpm": Actual bid cpm (prebid, rtb) or floor if vast/platform link, 9 "pubCpm": Publisher CPM after rev share, 10 "floorCpm": floor price used 11 "bidCode": "Bidder code from prebid", 12 "vast": Array of vast chain 13 } 14}
...
p1.asid
...
String
...
Ad source id
...
p1.clickThrough
...
String
...
Ad click through url if available
...
p1.videoUrl
...
String
...
Ad video url if available
...
...
String
...
Media type - vast or vpaid
...
p1.tagInfo
...
Object
...
Additional tag info
...
p1.tagInfo.url
...
String
...
Ad source ad unit or vast url
...
p1.tagInfo.bidCpm
...
Number
...
Bid cpm (prebid and rtb)
...
p1.tagInfo.pubCpm
...
Number
...
Publisher cpm taking into account publisher accounting rules
...
p1.tagInfo.floorCpm
...
Number
...
The floor cpm used
...
p1.tagInfo.bidCode
...
String
...
Prebid bidder code, GAM, Amazon
...
p1.tagInfo.bidder
...
String
...
Prebid bidder, GAM, amazon, Marketplace
Player Methods
The following player methods are available:
...
Method list
...
on(event, callback)
...
Listen to a player event
...
nextContent
...
Jump to next content or first content when called first time
...
prevContent
...
Jump to previous content
...
setContentByIndex
...
start a specific content
...
getWidth
...
Get player width
...
getHeight
...
Get player height
...
setSize(width, height)
...
Resize the player to the specified size
...
getContentDuration
...
Returns the content duration in sec
...
getContentCurrentTime
...
Get current time of content video in sec
...
setContentCurrentTime
...
Set the current content time in sec
...
play
...
Play the player
...
pause
...
Pause the player
...
mute
...
Mute the player
...
unmute
...
Unmute the player
...
getMuted
...
Returns if the player is muted or not
...
getVolume
...
Returns player volume
...
setVolume(vol)
...
Set player volume (Not working in ios)
...
changeGUI(contentProp, adsProp)
...
Set in runtime specific gui propertise
...
getAdDuration
...
Returns current playing ad duration
...
getAdRemainingTime
...
Returns current playing ad remaining play time
...
skipAd
...
Skip current playing ad
...
closePlayer
...
Close player
...
setAdConfig({atribute:value})
...
Update the ads player config
...
startFloat({attribute:value})
...
Start or restart the floating using an alternate floating object, for example:
startFloat({"closeButton":true,"floatOnBottom":true,"position":"Bottom-Right","size":0.7,"bottom":5,"right":5,"resize":true})
...
endFloat()
...
};
document.getElementsByTagName('head')[0].appendChild(scp);
};
downloadScript(PlayerUrl,adConfig);
})();
</script> |
adConfig Configuration Options
Name | Mandatory | Default Value | Values | Description |
publisherId | Yes | String | Aniview publisher id | |
channelId | Yes | String | Aniview channel id from the same account of the publisher id used | |
position | Yes | String | the div id where the player should be created | |
loop | No | false | Boolean | loop is used to control looping of video preloader true: At the end of content video, continue looping false: No content loop To control ad loops, use maxrun or maximp |
width | yes | Number | The player width in pixels If width = 100 and height = 0, width is auto detected based on containing element | |
height | yes | Number | The player height in pixels If width = 100 and height = 0, height is auto detected based on containing element and is calculated as width / 1.777 | |
minHeight | No | Number | Minimum player height - Used with width/height of 100/0 | |
minWidth | No | Number | Minimum player width - Used with width/height of 100/0 | |
maxRun | No | Number | Maximum number of waterfall runs in the player session | |
maxImp | No | Number | Maximum number of impressions per player session | |
vastRetry | No | Number | Number of consecutive waterfall retries without delay so the number of runs is 1 + vastRetry | |
errorLimit | No | Number | Maximum number of (1 + vastRetry) runs of the waterfall that do not generate impression. This means (1 + vastRetry) * (1 + errorLimit) - max number of consecutive waterfall runs that do not generate impression If there is an impression the counter reset to 0 | |
format | No | “all” | String with “js”, “html5“ | Choose a format to play, If “html5” than vpaids will not run in the player |
autoplay | No | true | Boolean | Defines if calling startAd automatically. If false, startAd should be called after getting onLoad callback event. With the ShortTag template this is managed automatically in order to play the ad when in view. |
ref1 | No | String | Macro list ref1: “AV_MACRO1=value1&AV_MACRO2=value2“ Values should be URL encoded | |
preloader | Used to display content while the player is searching for ads | |||
type | No | String | “Content” : video preloader “Image“ : Image “js“ : Javascript that runs in an iframe | |
link | String Array Object | Link to resource url If preloader type is Content, can also be an array of videos If preloader is type js, it can be an object defining the iframe to run - similar to the options in passbackUrl | ||
clickthrough | String Array | Clickthrough url when clicking on the content. Not relevant in js If preloader is Content, can also be an array of clickthrough urls per video in the content array | ||
poster | String | If preloader type is Content, url of an image to display while content is loading | ||
autoplay | String | If preloader type is Content, indicate if to start the content video automatically or its click to play | ||
midrolltime | No | 0 | Number | Number of seconds to wait between each (1 + vastRetry) waterfall runs |
midrolldelay | No | 0 | Number | Number of seconds to wait before running the waterfall the first time |
startaddelay | No | Auto calculated | Number | Number of seconds to wait for higher priority ad source to return with AdLoaded before calling startAd to the highest priority ad source that already responded with AdLoaded |
startmidroll | No | 0 | Number | Delay in seconds to wait before calling startAd after the end of an impression. This will create a minimal delay between ad videos |
startdelay | No | 0 | Number | Delay in seconds of calling startAd the first time |
midrollfunc | No | null | function | If midrollfunc is defined, it is called before running the waterfall every time. its parameter is a callback function to call and will continue the operation Its a way to control the calls to the waterfall in a very granular way |
soundbutton | No | true | Boolean | Show or not show the sound button |
pausebutton | No | true | Boolean | Show or not the pause/play button |
closebutton | No | true | Boolean | Show or not the close button |
Skip | No | false | Boolean | Show or not the skip button |
skipTimer | No | Number | Time to wait before showing the skip button. Required to be > 0 for skip button functionality | |
skipText | No | String | Text to show in skip button | |
closeevent | No | false | Boolean | If true, when clicking the close x button, the player is not closed and AdClosed event is fired. Its the responsibility of the wrapping code to close the player with the close() api |
passbackUrl | No | string | Link to a javascript that will execute in an iframe and will be displayed after the player finishes all its retries and impressions, contact support for the exact format It can also be an object as defined below | |
reqOnView | No | Boolean | If true, play calls ad sources only when in view | |
startAdOnView | No | Boolean | If true, calls to startAd will be done only when the player is in view | |
startAdOnViewPerc | No | Number | Viewability % used for startAdOnView. Default is 50 | |
reqOnViewTopDist | No | Number | Player will send requests only if the distance of the top of the player to the bottom of the viewport is below reqOnViewTopDist pixels Requires reqOnView: true | |
passbackUrl | No | object | ||
url | No | String | Link to javascript to write into the iframe. passback tags can be used as is without any special formatting | |
width | No | 100% | Number | width of passback iframe iframe is centered |
height | No | 100% | Number | height of passback iframe iframe is centered |
color | No | “#000“ | String | background color |
passbackpriority | No | false | Boolean | If true, passback will be used also if preloader is defined |
hideControls | No | false | Boolean | Hide player controls or not |
logo | No | true | Boolean | If false, does not show the player logo |
customLogo | Enable showing a custom logo | |||
link | String | Link to logo image | ||
height | Number | height in pixels of the logo | ||
width | Number | width in pixels of the logo | ||
text | String | Text to display near the logo, for example, “Ads by“ | ||
top | Number | Amount of pixels from the top to show the logo | ||
clickthrough | String | Url to open when clicking on logo | ||
waitforconsent | No | true | Boolean | If true, player will open only after receiving consent |
maxp | No | 5 | Number | Max concurrent calls to vpaid initAd |
autosounddetect | No | False | Boolean | If autosounddetect is true, the ads player will try to start ads with volume on. If its not supported ads will start muted. (Not supported on IOS) |
autosoundvolume | No | Number | Volume set up, between 0-1 | |
imarpm | No | Number | Limit max requests per minute for all IMA ad sources in the waterfall | |
vastIconEnabled | No | Boolean | If true, if a vast includes an icon definition, the icon will be displayed on one of the ad corners | |
adscontrolpositioning | No | 'right' | String | Moves the volume and fullscreen icons away from the right side. This config can be use to avoid conflict with google IMA skip button |
Player API
new avPlayer(adConfig)
Instantiate the player object with the adConfig configuration
play()
Start the player instance. Should be called only once
mute()
Mute the audio of the currently playing video
unmute()
Unmute the current playing video
Must be called as a result of user click action in the page
pause()
Pause the currently playing video
resume()
Resume the player if it’s paused
startAd()
Should be used only with autoPlay: false
After getting the AdLoaded event, can be used in order to call startAd to the ad. The player will automatically continue after that to call the next ads
close()
Close the player and stop its functionality
updateGui(config)
Can be used to set specific gui options
config is an object that can include one or more configurations. Possible settings:
close: true/false
show or hide the close buttonskip: true/false
Show or hide the skip buttonplayPause: true/false
Show or hide the play/pause buttonsound: true/false
Show or hide the sound buttonlogo: true/false
Show or hide the player logo
resize(width, height)
Resize the player to the requested width and height
getAdDuration()
Returns the current ad duration in seconds
getAdRemainingTime()
Returns the number of seconds remaining till the end of the current playing ad
getAdVolume()
Returns the volume of the current playing ad
setAdVolume(vol)
Set the current ad volume
getAdCompanions()
Returns the ad companions string of the current playing ads from the vast response
getWidth()
Returns the player width in pixels
getHeight()
Returns the player height in pixels
on(evt, func, context)
Register an event listener for player events
off(evt, func)
Unregister an event/function
startViewability(elid, callback, ratio)
Start viewability monitoring in the player
Parameters:
elid: The element to measure, by default will use the player position
callback: Callback function to call on every viewability change. Callback function parameters:
Boolean: in view or not
Number: Current ratio of viewability
String: State that indicates if below/above/partial the fold
Viewability ratio defined as viewable. Default is 0.5
stopViewability()
Stop viewability monitoring
getViewability()
Returns current viewability of the player
getContentPaused()
Returns a boolean to indicate if the content video is playing or not
getContentCurrentTime()
Returns the content video current time
pauseContent()
Pause the currently playing video content
resumeContent()
Resume playing of the video content
setContentVolume(vol)
Set the volume of the content
pausePlayer()
Pause calls to startAd
ResumePlayer()
Resume calls to startAd
getReadyAds()
Returns the number of ready ads (Ads in AdLoaded state)
setWaterfallState(state, force)
Pause or resume additional calls to startAd.
state | force | description |
|---|---|---|
true | true | Resume calls to startAd. If there is a loaded event call startAd |
true | false | Do not use |
false | false | Pause calls to startAd. Do not stop currently running call to startAd if there is any |
false | true | Pause calls to startAd. If there is an active call to startAd that did not respond yet, kill it. |
startTemplate(aniBox)
Start player template implementation. See below for details on template configuration
setAdConfig({atribute:value})
Update the player config
startFloat({attribute:value})
Start or restart the floating using an alternate floating object, for example:
startFloat({"closeButton":true,"floatOnBottom":true,"position":"Bottom-Right","size":0.7,"bottom":5,"right":5,"resize":true})
stopFloat()
Stop the floating
Player Events
The player on() function can be used to subscribe to events. Multiple listeners can be set for each event
In addition, callback on functions are supported to the events
Note: With vpaid ad sources, the player relies on events triggered by the vpaid. In some cases, some events are not supported by vpaids so those events might not be called sometimes.
The supported events are:
Event name | Description | ||
|---|---|---|---|
AdLoaded onLoad | Indicates the first time an ad sources triggered the AdLoaded event | ||
AdReady | Fires on every ad AdLoaded event of any ad | ||
AdEvent onEvent | Granular vast and request bid events per ad source | ||
AdImpression onPlay | Called when there is a video impression.
| ||
AdVideoFirstQuartile onPlay25 | Called when the ad reached 25% of the ad video | ||
AdVideoMidpoint onPlay50 | Called when the ad reached 50% of the ad video | ||
AdVideoThirdQuartile onPlay75 | Called when the ad reached 75% of the ad video | ||
AdVideoComplete onPlay100 | Called when the ad completed | ||
AdClickThru onClick | Called when the ad is clicked on | ||
AdPaused onPause | Called when the ad is paused | ||
AdPlaying onResume | Called when the ad starts playing or resumed | ||
AdError onError | Called by the player every time it finish running 1 + vastRetry waterfall runs without impression Called also whenever the player decides that it should stop running, for example when maxImp or maxRun is reached, in this case the event will pass a parameter: {errorlimit: true} to indicate the player is stopping calls for ads | ||
AdStopped onStopped | Called when the player is stopping | ||
AdSkipped onSkip | Called when an ad is skipped | ||
AdClosed onClose | Called when the player is closing | ||
AdVolumeChange onUnmute onMute | Called when the ad volume is changed | ||
ContentImpression onContentPlay | Called whenever a content video is starting to play | ||
ContentComplete onContentPlay100 | Called whenever the content video is ending | ||
ContentPaused onContentPaused | Called when the content video is paused | ||
ContentPlaying onContentPlaying | Called when the content video resume playing | ||
ContentClick onContentClick | Called when the content video is clicked | ||
Inventory onInventory | Called when the player is initialized | ||
InventoryRequest onInventoryRequest | Called every time the player starts a waterfall run | ||
AdViewableImpression | Called on viewable impression event - when ad is viewable for at least 2 consecutive sconds |
Sample Events
Player Initialized Event
The player is initialized on the inventory event
| Code Block | ||
|---|---|---|
| ||
player.on("Inventory", function(){
//Player is initialized
}); |
Impression Event
| Code Block | ||
|---|---|---|
| ||
player.on("AdImpression", function(){
//Ad impression accoured
}); |
Identify when the Player Finished Calls
An AdError event is called every time a set of vastRetry+1 calls to the waterfall finished without impression or when at least one limit of the player configuration is reached (maxRun, maxImp, errorLimit)
When the player finished calls and will not continue anymore, it calls AdError event and passes an errorlimit parameter
| Code Block | ||
|---|---|---|
| ||
player.on("AdError", function(res){
if(res && res.errorlimit) {
//Player stopped
}
}); |
Player Templates
The player support advanced templates such as In Article, Floating, Sticky and many customizations.
Aniview provides a tool for managing templates configuration. this section describes the configuration flags available for templates configuration
In order to activate the template, its is required to wrap the player element in additional elements and call the startTemplate API passing the element of the parent of the player position element
Template Position Wrapper
The player position (<div id="aniplayer_aniviewJS562811134">) is wrapped with an aniBox div and another wrapper
| Code Block | ||
|---|---|---|
| ||
<div style="width: 100%; margin: 0px auto; max-width: 640px;">
<div id="aniBox" style="height: 1px;">
<div id="aniplayer_aniviewJS562811134">
</div>
</div>
</div> |
The player template generator automatically build this structure
The player is created inside the position div with a unique id
Starting Template
In order to start running a template with the below configuration options, it is required to call startTemplate passing the element of the parent of the position passed in position. In this case it will be the aniBox element
| Code Block |
|---|
player.startTemplate(document.getElementById(adConfig.position).parentNode) |
Templates Configuration
The templates configuration ads additional configurations to adConfig
Those configurations are used only if startTemplate is called
Name | Mandatory | Default Value | Values | Description |
|---|---|---|---|---|
playOnView | false | Boolean | If set to true, the player will automatically check viewability and will call startAd only when in view. | |
startOnView | false | Boolean | If set to true, the player will start only when in view. This means that inventory will be sent only when in view and the player loads | |
reqOnView | false | Boolean | If set to true, the player will run the waterfall and call ad sources only when in view. When out of view, when its time to call the ad sources, the player will verify that its in view and if not it will wait till the player is in view | |
vitab | false | Boolean | If set to true, tab viewability is taken into account when checking viewability | |
pauseOnUnseen | false | Boolean | If set to true, the player will pause when its out of view | |
pauseOnBlur | false | Boolean | Pause when browser window lose focus | |
openAnim | false | Boolean | If true, player opens in animation | |
hideInitPreloader | false | Boolean | Hide player when searching for ads | |
showPlayer | Boolean | Force showing the player | ||
scriptId | Yes | String | Id of script used to position the player if no pos defined | |
posId | String | Position id If defined the player will be located on the element with the specified id | ||
posTag | String | Position tag If defined the player will be located on the element with the specified tag name | ||
posClass | String | Position class If defined the player will be located on the first element with the specified class | ||
posSelector | String | Position selector If defined, the player position will use querySelector with the given string | ||
posDfp1x1 | Boolean | If defined, it is assumed the player script is served inside a 1x1 hidden iframe generated by DFP The player will position at the place of the iframe in the parent window | ||
adLabel | Object | If defined, it will appear above the player e.g. {"text":"Advertisment"} | ||
InArticle/InFeed | The player opens up only when there is an ad impression and takes the place in the page to display the ad. When it finish usually it collapse Use with a combination of playOnView and other flags | |||
Floating | Object | A floating player has a position in the page body and when out of view it floats to a fixed position over the page is its always viewable A floating player can start as InArticle/InFeed and float when the position is out of view | ||
size | Number 0-1 | The size of the floating player will be the size of the original player x size | ||
right | Number | Create a margin of the defined number from the right side of the window | ||
bottom | Number | Create a margin of the defined number from the bottom of the window | ||
customCss | String | Used to define custom CSS that will be implemented in <style></style>. | ||
floatingCss | String | Used to define custom place for the floating player, for example use the below for a bottom-left floating half the size of the original player. | ||
floatOnBottom | Boolean | By default the floating player only appears when scrolling down, If true, will float whenever the player is out of view | ||
closeButton | Boolean | If true, show a close button that will unfloat the player to its original position | ||
Sticky | Object | A sticky player is always sticking i a fixed position on the screen, typically in one of the screen corners | ||
size | Number | The size of the sticky player will be the size of the original placement x size Set to 1 for easy configuration | ||
position | String | Defines the position of the sticky player. Can be one of: Bottom-Right Bottom-Left Top-Right Top-Left | ||
right | Number | Create a margin of the defined number from the right side of the window | ||
left | Number | Create a margin of the defined number from the left side of the window | ||
top | Number | Create a margin of the defined number from the top side of the window | ||
bottom | Number | Create a margin of the defined number from the bottom side of the window |
...
Placements extend the regular studio tag configurations in the following fashion:
...