HTML5 video APIs

The player implements almost complete APIs provided by the HTMLVideoElement which is the one that is used with the <video /> tag in HTML.

The object is not actually a HTMLVideoElement DOM element. It is a proxy object that reflects the state of the internal <video /> element. It relays the methods calls and reflects most of the properties and attributes.

Accessing the proxy video element

const iframe = document.querySelector('iframe');
const player = VdoPlayer.getInstance(iframe);
// player.video

Events

Use player.video.addEventListener to listen HTMLMediaElement events
and use player.video.removeEventListener to remove listener

This function works just like on the HTMLVideoElement.

const pauseHandler = () => {
  console.log('Video is Paused');
};

// attaching event listener.
player.video.addEventListener('pause', pauseHandler);

// removing event listener
player.video.removeEventListener('pause', pauseHandler);

List of event supported by `player.video`

eventName	description
abort	The browser stops fetching the media data before it is completely downloaded, but not due to an error.
canplay	The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplaythrough	The browser estimates it can play the media up to its end without stopping for content buffering.
durationchange	The duration attribute has been updated.
emptied	The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
ended	Playback has stopped because the end of the media was reached.
error	An error occurred while fetching the media data, or the type of the resource is not a supported media format.
loadeddata	The first frame of the media has finished loading
loadedmetadata	The metadata has been loaded.
loadstart	The browser begins looking for media data, as part of the resource selection algorithm.
pause	Playback has been paused.
play	Playback has begun.
playing	Playback is ready to start after having been paused or delayed due to lack of data.
progress	Fired periodically as the browser loads a resource.
ratechange	The playback rate has changed.
resize	One or both of the videoWidth and videoHeight attributes have just been updated.
seeked	A seek operation completed.
seeking	A seek operation began.
stalled	The browser is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend	Media data loading has been suspended.
timeupdate	The time indicated by the currentTime attribute has been updated.
volumechange	The volume has changed.
waiting	Playback has stopped because of a temporary lack of data.

Methods

name	description
pause	method attempts to pause playback of the media.
play	method attempts to begin playback of the media.
addEventListener	method for to sets up a function that will be called whenever the specified event is delivered to the target
removeEventListener	method to removes an event listener previously registered with `addEventListener()` from the target

Properties

name description

videoWidth readyonly indicates the intrinsic height of the video

videoHeight readyonly indicates the intrinsic width of the video

playsInline indicating that the video is to be played "inline", that is within the element's playback area

disablePictureInPicture indicating whether the browser should suggest the picture-in-picture feature to users, or request it automatically.

networkState readyonly

indicates the current state of the fetching of media over the network.

Constant	Description
`HTMLMediaElement.NETWORK_EMPTY`	There is no data yet.
`HTMLMediaElement.NETWORK_IDLE`	HTMLMediaElement is active and has selected a resource, but is not using the network.
`HTMLMediaElement.NETWORK_LOADING`	The browser is downloading HTMLMediaElement data.
`HTMLMediaElement.NETWORK_NO_SOURCE`	No HTMLMediaElement src found.

buffered readyonly return the normalized TimeRanges object, if any, that browser has buffered at the moment of buffered property accessed

readyState readyonly

indicates the readiness state of the media.
comapre the values of readyState with one of the following constants

Constant	Description
`HTMLMediaElement.HAVE_NOTHING`	No information is available about the media resource.
`HTMLMediaElement.HAVE_METADATA`	Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
`HTMLMediaElement.HAVE_CURRENT_DATA`	Data is available for the current playback position, but not enough to actually play more than one frame.
`HTMLMediaElement.HAVE_FUTURE_DATA`	Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
`HTMLMediaElement.HAVE_ENOUGH_DATA`	Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

seeking readonly indicate the user is currently seeking in the audio/video.

currentTime indicates the current playback time in seconds.

duration indicates the duration for media in seconds

paused readonly indicates whether the media element is paused.

defaultPlaybackRate indicates the default playback rate for the media.

playbackRate indicates the default playback rate for the media

played readonly return the normalized TimeRanges object, and tells you, which part of media have been played

seekable readonly return the normalized TimeRanges object and tells you which parts of the media can be played without delay

ended readonly indicates whether the media element has ended playback.

autoplay reflect the nature of auto play of media.

loop reflect the loop HTML attribute, which controls whether the media element should start over when it reaches the end.

controls reflect the controls HTML attribute, which controls whether user interface controls for playing the media item will be displayed.

volume indicates the volume at which the media will be played.

muted indicates whether the media element muted.

defaultMuted reflects the muted HTML attribute, which indicates whether the media element's audio output should be muted by default

Differences

Some methods of the HTMLVideoElement are synchronous and return immediately. On our video object, every method is a promise. This is a consequence of the fact the actual <video /> is inside an iframe and we cannot do synchronous response.
player.video is not a actual video element but a proxy video element, so it does support most of the property/method of HTMLVideoElement, but certain method/property can not be made available and will have default value of NOT_AVAILABLE_ON_API. and every method will wrapped in promise.
we also have our own custom-built API to provide for common and mostly used functionality which are not covered by HTMLVideoElement on player.api

Accessing the proxy video element​

Events​

List of event supported by player.video​

Methods​

Properties​