Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The player has a very flexible configuration to match the customer's requirements.

Child pages (Children Display)
allChildrentrue
Table of Contents

Sample Configuration

Code Block
languagehtml
<div id="theplayer"> </div>
<script type="text/javascript">
(function(()
{
	var config = {
		adConfig : {
			publisherId : "Your id",
			channelId : "Your id",
			ref1 : "",
			width : 100,
			height : 0,
			autoPlay : true,
			soundButton : true,
			pauseButton : true,
			closebutton : false,
			errorlimit : 100,
			vastRetry : 0,
			loop : true,
			position : ""
		},
		position : "theplayer", 
		width : 100,
		height : 0,
		showBigPlay : true, 
		showBigPlayOnPause : true,
		showBigPrevNextOnPause : true,
		soundButtonPosition : "right", 
		showPauseButton : true,
		showPrevButton : false, 
		showNextButton : false,
		showBigPrevNext : true, 
		showSoundButton : true,
		showVolumeControl : true,
		volumeControlVertical : true, 
		showErrorScreen : true, 
		durationPosition : "right", 
		playlistAutoSkipOnError : true, 
		showUiOnPause : false, 
		showTimelineReplay : true, 
		viewPercentageRequired : 1, 
		showFullScreen : false, 
		showDuration : true, 
		hideGuiOnMouseout : true, 
		hideGuiTimeout : 1, 
		timelineMode : "default", 
		spinner : "default", 
		theme : "solid", 
		themeColor : "#ff0000", 
		playOnView : false, 
		logo : {
			url : "LINK_TO_PNG",
			text : false,
			size : [
				90,
				42
			],
			position : "left"
		},
		startVolume : 1, 
		syncVolume : true, 
		autoPlay : false,
		autoLoop : true, 
		autoContinue : true, 
		showReplay : true,
		mobile : { 
			"showBigPlay" : true,
			"showBigPlayOnPause" : true,
			"showBigPrevNext" : true,
			"showUiOnPause" : false,
			"showPauseButton" : true,
			"showPrevButton" : false,
			"showNextButton" : false,
			"showFullScreen" : false,
			"hideGuiTimeout" : 2
		},
		replayText : "Replay",
		content : {
			"order" : 1, 
			"randomFrom" : 1, 
			"breakingAds" : 15, 
			"breakingAdsMode" : "op", 
			"contents" : [{
					"id" : "ID1", 
					"url" : "LINK_TO_MP4", 
					"fallbackUrl" : "LINK_TO_FALLBACK_MP4", 
					"clickThroughUrl" : "CLICKTHROUGH_URL",
					"type" : "video",
					"slots" : [{
							"type" : "ad", 
							"time" : 0 
						}
					]
				}, {
					"id" : "ID2", 
					"url" : "LINK_TO_MP4", 
					"fallbackUrl" : "LINK_TO_FALLBACK_MP4", 
					"clickThroughUrl" : "CLICKTHROUGH_URL",
					"type" : "video",
					"slots" : [{
							"type" : "ad", 
							"time" : 0 
						}
					]
				}
			]
		"firstPrerollSlot": {
            "time": 0,
            "firstAdTimeOut": 15,
            "preloadAdTime": 5,
            "maxAds": 1,
            "nextAdTimeout": 8
        },
        "commonSlots": [{
                "time": 5,
                "firstAdTimeOut": 15,
                "preloadAdTime": 5,
                "maxAds": 1,
                "nextAdTimeout": 8
            }, {
                "time": 10,
                "firstAdTimeOut": 15,
                "preloadAdTime": 5,
                "maxAds": 1,
                "nextAdTimeout": 8
            }, {
                "time": 15,
                "firstAdTimeOut": 15,
                "preloadAdTime": 5,
                "maxAds": 1,
                "nextAdTimeout": 8
            }
        ],
		}
	};

	function downloadScript() {
		var scp = document.createElement('script');
		scp.src = "https://player.avplayer.com/script/28.3/v/avcplayer.js";
		scp.onload = function () {
			var AniviewContentPlayer = com.aniview.player.AniviewContentPlayer;
avContentPlayer.createPlayer().then(function (AniviewContentPlayer) {
				var player = new AniviewContentPlayer(config);

				player.nextContent();
            });
		}
		document.getElementsByTagName('head')[0].appendChild(scp);
	};

	downloadScript();

})();
</script>

...

  • https://player.avplayer.com/script/28/v/avcplayer.js This player will always be updated to the latest version

  • https://player.avplayer.com/script/2/2.54/avcplayer.js This will point to a specific version. It's up to the customer to upgrade to a later release as needed

...

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

ue

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

content

title

Object

Content object

content.

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.

when in view.

floating.when

String

Can be set to “on-ads”

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'

script

| ‘html' | '

html' | 'txt' - Type of the passback file. Default "script"

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

autoSkip.text

String

Set custom text for auto skip button

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


Player Events

Capturing events is done by using the following API

player.on(“event name“, callback);

Event list

AdSkipped

AdRemainingTimeChange

AdVolumeChange

AdSizeChange

onFloatingChanged

FloatingChanged

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

...

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

p1.mt

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

stopFloat()

Stop the floating