VdoPlayer JS www.vdocipher.com
import VdoPlayer from 'VdoPlayerJS/vdo/VdoPlayer.js'
public class | source

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).

This code is executed in the user space or the client's website. This makes it important to not be bloated and not to interfere with anything global. It should only interact with the correct iframe window and should stay within the window.vdo global object

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

Constructor Summary

Public Constructor
public

set up the properties and start loading 1.

Member Summary

Public Members
public

whether to start playing the next video in queue

public
public

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

public

this is a read-only property currently.

public
public
public
public
public
public
public

if the volume is 0 or muted

public
public

number of videos in queue check queuePosition

public

the position of current video in the queue starting from 0.

public

status: *

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

  • -1: video is still loading
  • 0: ready to play
  • 1: playing
  • 2: paused
  • 3: ended
public get

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

public
public
public

Method Summary

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
public

adds a new video to the end of queue

public

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

public

chooseTrack(trackId: number)

selects a track to play Not implemented

public

emitEvent(eventName: String, eventPayload: any?)

emit event.

public

hide controls for some

public

inject html as a string into the theme.

public

load(embedInfo: embedInfoType)

leaves the queue unchanged but starts playing another video the queuePosition remains the same.

public

mute()

mutes the video

public

starts playing the next video in queue

public

pause()

pauses a playing video

public

play()

starts the video or resume a paused video

public

plays a particular video from queue given its index

public

starts playing the previous video in queue

public

seek(position: number)

Seeks to a specified time in the video.

public

chooses quality by trackId

public

setAdaptive(isAdaptive: boolean)

enable auto-adaptive switching of bitrates

public

changes the speed of player among the available possible speed

public

setVolume(volume: number)

sets the volume of video.

public
this method was deprecated.

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

public

unmute()

unmutes the video

Public Constructors

public constructor(embedInfo: embedInfoType) source

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
embedInfo embedInfoType

embed information

Public Members

public autoAdvancePlaylist: boolean source

whether to start playing the next video in queue

public autoplay: Boolean source

public bufferLength: number source

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

public currentTime: number source

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

public ended: boolean source

public errorMessage: string source

public fullscreen: boolean source

public hasError: boolean source

public isBuffering: boolean source

public loop: Boolean source

public muted: boolean source

if the volume is 0 or muted

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

public playbackRate: number source

public queueLength: number source

number of videos in queue check queuePosition

public queuePosition: number source

the position of current video in the queue starting from 0. If a video is playing and addToQueue method is called, the queueLength becomes 2 and queuePosition is still 0. When video goes to next video, the queuePosition will become 1;

public status: * source

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

  • -1: video is still loading
  • 0: ready to play
  • 1: playing
  • 2: paused
  • 3: ended

public get statusText: String source

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

public totalCovered: number source

public totalCoveredArray: number[] source

public totalPlayed: number source

Public Methods

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

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

list of IMA ads events //TODO

Params:

NameTypeAttributeDescription
event string

name of event

callback function(eventName: string, payload: object): void

which will be called

Return:

function

unsubscribe method: call this closure to remove this event listener

public addToQueue(embedInfo: embedInfoType) source

adds a new video to the end of queue

Params:

NameTypeAttributeDescription
embedInfo embedInfoType

public canPlayType(type: String): Boolean source

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
type String

Return:

Boolean

public chooseTrack(trackId: number) source

selects a track to play Not implemented

Params:

NameTypeAttributeDescription
trackId number

integer starting 0

public emitEvent(eventName: String, eventPayload: any?) source

emit event. Mostly internal uses. Can be used to trigger artificial events. events from theplayer.io theme will be prefixed with mpml:

Params:

NameTypeAttributeDescription
eventName String
eventPayload any?

public hideControlsForSome() source

hide controls for some

public injectThemeHtml(htmlStr: String) source

inject html as a string into the theme. The binders and methods from theplayer.io are applicable on this string

Params:

NameTypeAttributeDescription
htmlStr String

public load(embedInfo: embedInfoType) source

leaves the queue unchanged but starts playing another video the queuePosition remains the same. Do NOT use this when managing playlists // TODO create internal load method

Use the playIndexFromList() or addToQueue() methods in order to maintain the playlist queue

Params:

NameTypeAttributeDescription
embedInfo embedInfoType

public mute() source

mutes the video

public nextMedia() source

starts playing the next video in queue

public pause() source

pauses a playing video

public play() source

starts the video or resume a paused video

public playIndexFromList(idx: number) source

plays a particular video from queue given its index

Params:

NameTypeAttributeDescription
idx number

public previousMedia() source

starts playing the previous video in queue

public seek(position: number) source

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
position number

in seconds

public selectQualityTrack(trackId: Number) source

chooses quality by trackId

Params:

NameTypeAttributeDescription
trackId Number

public setAdaptive(isAdaptive: boolean) source

enable auto-adaptive switching of bitrates

Params:

NameTypeAttributeDescription
isAdaptive boolean

public setPlaybackRate(rate: number) source

changes the speed of player among the available possible speed

Params:

NameTypeAttributeDescription
rate number

float between 0 and 5

public setVolume(volume: number) source

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

Params:

NameTypeAttributeDescription
volume number

float between 0 and 1

public togglePlayback() source

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() source

unmutes the video