• Background
• Initializing the player
• Life Cycle
  • After initialization:
  • On setting of src:
  • On playing, TrmrPlayer emits:
  • In the case of a ``.pause():
  • In the case of a .play() after a.pause():
• Properties
  • player.node
• Methods
  • player.emit(type)
  • player.on(type, fn)
  • player.hide()
  • player.show ()
  • player.use(key, [videoName])
• Standard HTML5 video features
  • player.node Properties
  • player.node Methods
• Learn more

Background

The Secondary Player is a special object that contains an HTML <video> node to emit relevant events such as quartile tracking events. It is intended to be used in conjunction with Player Container Plugin.

This defers from the Primary Player also known as the videoSlot in VPAID specification. You can access the Primary Player using $b._videoSlot, it is a standard HTML node in most players. You should not modify the properties of the Primary Player as it can cause unintended effects.

Initializing the player

You can access a secondary player from anywhere in your code. It is a global that creates the secondary video player if the index is not already present.

var player = $b.getPlayer(0)

Life Cycle

After initialization:

1. hasStarted is false
2. isPaused is undefined because no src is set and player state is indeterminate.
3. isMuted is undefined because no src is set and player state is indeterminate.

On setting of src:

1. video will autoplay, VideoPlayer emit “Start”
2. hasStarted is true

On playing, TrmrPlayer emits:

1. "Start": when <video> starts with 0% or higher, triggered once
2. "FirstQuartile": when <video> reaches 25% or higher, triggered once
3. "Midpoint": when <video> reaches 50% or higher, triggered once
4. "ThirdQuartile": when <video> reaches with 75% or higher, triggered once
5. "Complete": when <video> triggers “ended”

Learn more in Quartile Events below.

In the case of a <video>.pause():

1. isPaused is true
2. VideoPlayer emits “pause” (note the casing)

In the case of a <video>.play() after a <video>.pause():

1. isPaused is false
2. VideoPlayer emits “resume” (note the casing)

Properties

player.node

The actual HTML <video> node.

This lets you do things like:

player.node.muted = false
player.node.autoplay = false
player.node.play()

You can access the full functionality of HTML5 Video and this MDN article.

The following list of properties are non-exhuastive and can be helpful.

Methods

player.emit(type)

This emits the event of your type

player.on(type, fn)

You can listen to quartile events from your videos, for example, FirstQuartile, Midpoint, ThirdQuartile, Complete. Note the casing.

player.on('FirstQuartile', function () {
  console.info('FirstQuartile')
})
player.on('Complete', function () {
  console.info('Complete')
})
player.on('Start', function () {
  console.log('Start')
})

Note the capitalization in the event names.

player.hide()

This hides the video.

player.show ()

This shows the video.

player.use(key, [videoName])

Use a key to select the video to play.

player.use('main', 'CokeZero')

If videoName is specified, it will emit the following:

• MediaProgress_${videoName}_0
• MediaProgress_${videoName}_25
• MediaProgress_${videoName}_50
• MediaProgress_${videoName}_75
• MediaProgress_${videoName}_100

AdError is dispatched when the key is not found.

Standard HTML5 video features

As mentioned, you have access to standard HTML video features as node is nothing more than a standard HTML5 node. More documentation for HTML here.

This allows you to do things like:

player.node.controls = true
player.node.addEventListener('ended', function (ev) {
  console.info(ev.target.currentTime)
})
player.node.addEventListener('timeupdate', function (ev) {
  console.info(ev.target.currentTime)
})

player.node Properties

Read-only:

• duration (number): Returns a double indicating the length of the media in seconds, or 0 if no media data is available.
• ended (boolean): Returns a Boolean that indicates whether the media element has finished playing.
• muted (boolean): Determines whether audio is muted. true if the audio is muted and false otherwise.
• paused (boolean): Returns a Boolean that indicates whether the media element is paused.

Mutable:

• autoplay (boolean): Reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.
• controls (boolean): Reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed.
• loop (boolean): Reflects the loop HTML attribute, which indicates whether the media element should start over when it reaches the end. If specified, we will, upon reaching the end of the video, automatically seek back to the start.
• muted (boolean): Indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.
• volume (number): Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).

player.node Methods

• play(): Begins playback of the media.
• pause(): Pauses the media playback.
• addEventListener(type, listener[, useCapture]): This method registers the specified listener on the EventTarget it’s called on.

Learn more

• Creative blog