Skip to main content

VdoPlayer

An instance of this class is created for every video embedded into the page. This class initializes the playback. it also exposes a set of utility methods and properties to provide a common js api interface for all vdocipher videos.

This class creates an iframe inside the container element. The iframe loads an internal player based on device capabilities. This class maintains a sync between the internal player properties. It exposes a common set of properties, methods and events irrespective of underlying player or device.

The properties are updated based on underlying player events and relies on async postMessage actions. Hence, there can be delay (~200ms).

  • All properties are read-only
  • Directly created instances of this class will not be accessible from the vdo.getObjects() method.

Public Constructor Summary#

FunctionDefinition
constructor (embedInfo: embedInfoType)set up the properties and start loading

Public Member Summary#

Member
bufferLength : numberthe player position till which video will play if network connection breaks
currentTime : numberthis is a read-only property currently
ended : boolean
errorMessage : string
fullscreen : boolean
hasError : boolean
idle : boolean
isBuffering : boolean
loop : Boolean
muted : booleanif the volume is 0 or muted
playbackRate : number
status : *Status can be [-1, 0, 1, 2, 3]
  • -1: video is still loading
  • 0: ready to play
  • 1: playing
  • 2: paused
  • 3: ended
statusText : Stringcan be one of loading, loaded, playing, paused, ended
title : *
totalCovered : number
totalCoveredArray : number[]
totalPlayed : number
volume : number

Public Method Summary#

Method
addEventListener (event: string, callback: function(eventName: string, payload: object): void): functionadd an event listener Note that you can add multiple event listeners to the same event and they will all be called in the order they were added list of events
  • load
  • play
  • pause
  • seeking
  • progress
  • ended
  • changeVolume
  • mpmlLoad
canPlayType(type: String): stringalways false the player object like to emulate an actual HTML5 player but is not capable to directly play third-party videos.
chooseTrack (trackId: number)selects a track to play Not implemented
injectThemeHtml(htmlStr: String, warn: boolean)inject html as a string into the theme
mute()mutes the video
pause()pauses a playing video
play()starts the video or resume a paused video
seek(position: number)Seeks to a specified time in the video
selectQualityTrack(trackId: Number)chooses quality by trackId
setAdaptive(isAdaptive: boolean)enable auto-adaptive switching of bitrates
setPlaybackRate(rate: number)changes the speed of player among the available possible speed
setVolume(volume: number)sets the volume of video
togglePlayback()this method was deprecated
instead of using this method check status and use play and pause methods
unmute()unmutes the video

Public Constructor#

public constructor(embedInfo: embedInfoType)

set up the properties and start loading

  1. set up default properties
  2. set up the event listener properties
  3. create a proxy messengar to listen to events from the other side.
  4. load the meta data for the video
  5. once meta is loaded, begin rest of the work

Params:

NameTypeAttributeDescription
embedInfoembedInfoTypeembed information

Public Members#

public bufferLength: number#

the player position till which video will play if network connection breaks

public currentTime: number#

this is a read-only property currently. Use the seek method to change currentTime.

public ended: boolean#
public errorMessage: string#
public fullscreen: boolean#
public hasError: boolean#
public idle: boolean#
public isBuffering: boolean#
public loop: Boolean#
public muted: boolean#

if the volume is 0 or muted Note that the volume can be non-zero when muted is true

public playbackRate: number#
public status: \*#

Status can be [-1, 0, 1, 2, 3]

  1. video is still loading
  2. ready to play
  3. playing
  4. paused
  5. ended
public get statusText: String#

can be one of loading, loaded, playing, paused, ended

public title: \*#
public totalCovered: number#
public totalCoveredArray: number[]#
public totalPlayed: number#
public volume: number#

Public Methods#

public addEventListener(event: string, callback: function(eventName: string, payload: object): void): function#

add an event listener Note that you can add multiple event listeners to the same event and they will all be called in the order they were added list of events

  • load
  • play
  • pause
  • seeking
  • progress
  • ended
  • changeVolume
  • mpmlLoad

Params

NameTypeAttributeDescription
eventstringname of event
callbackfunction(eventName: string, payload: object): voidwhich will be called

Return:

function - unsubscribe method: call this closure to remove this event listener

public canPlayType(type: String): string#

always false the player object like to emulate an actual HTML5 player but is not capable to directly play third-party videos. will always return false.

Params

NameTypeAttributeDescription
typeString

Return

string

public chooseTrack(trackId: number)#

selects a track to play Not implemented

Params

NameTypeAttributeDescription
trackIdnumberinteger starting 0
public injectThemeHtml(htmlStr: String, warn: boolean)#

inject html as a string into the theme.

Params

NameTypeAttributeDescription
htmlStrString
warnboolean
public mute()#

mutes the video

public pause()#

pauses a playing video

public play()#

starts the video or resume a paused video

public seek(position: number)#

Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, ended, etc.), the player will play the video.

Params:

NameTypeAttributeDescription
positionnumberin seconds
public selectQualityTrack(trackId: Number)#

chooses quality by trackId

Params:

NameTypeAttributeDescription
trackIdnumber
public setAdaptive(isAdaptive: boolean)#

enable auto-adaptive switching of bitrates

Params:

NameTypeAttributeDescription
isAdaptiveboolean
public setPlaybackRate(rate: number)#

changes the speed of player among the available possible speed

Params:

NameTypeAttributeDescription
ratenumberfloat between 0 and 5
public setVolume(volume: number)#

sets the volume of video. Takes argument of float value between 0 and 1. 1 means maximum volume.

Params:

NameTypeAttributeDescription
volumenumberfloat between 0 and 1
public togglePlayback()#

this method was deprecated

instead of using this method check status and use play and pause methods

starts, resume the video if not playing, pauses if playing

public unmute()#

unmutes the video