Skip to main content

VdoPlayer

Newer version available

You are seeing documentation of an older player version. Check the embed code for newer player v2. The new player has shorter load-times, more customisable and has a lot of new features. There are many more API methods & events also supported. See how to connect API to v2 player. And the full list of HTML5-like APIs and more APIs.

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
  • volumechange
  • 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
  • volumechange
  • 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