Skip to main content

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


Use to listen HTMLMediaElement events
and use to remove listener

This function works just like on the HTMLVideoElement.

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

// attaching event listener.'pause', pauseHandler);

// removing event listener'pause', pauseHandler);

List of event supported by

abortThe browser stops fetching the media data before it is completely downloaded, but not due to an error.
canplayThe 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.
canplaythroughThe browser estimates it can play the media up to its end without stopping for content buffering.
durationchangeThe duration attribute has been updated.
emptiedThe 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.
endedPlayback has stopped because the end of the media was reached.
errorAn error occurred while fetching the media data, or the type of the resource is not a supported media format.
loadeddataThe first frame of the media has finished loading
loadedmetadataThe metadata has been loaded.
loadstartThe browser begins looking for media data, as part of the resource selection algorithm.
pausePlayback has been paused.
playPlayback has begun.
playingPlayback is ready to start after having been paused or delayed due to lack of data.
progressFired periodically as the browser loads a resource.
ratechangeThe playback rate has changed.
resizeOne or both of the videoWidth and videoHeight attributes have just been updated.
seekedA seek operation completed.
seekingA seek operation began.
stalledThe browser is trying to fetch media data, but data is unexpectedly not forthcoming.
suspendMedia data loading has been suspended.
timeupdateThe time indicated by the currentTime attribute has been updated.
volumechangeThe volume has changed.
waitingPlayback has stopped because of a temporary lack of data.


pausemethod attempts to pause playback of the media.
playmethod attempts to begin playback of the media.
addEventListenermethod for to sets up a function that will be called whenever the specified event is delivered to the target
removeEventListenermethod to removes an event listener previously registered with addEventListener() from the target


videoWidth readyonlyindicates the intrinsic height of the video
videoHeight readyonlyindicates the intrinsic width of the video
playsInlineindicating that the video is to be played "inline", that is within the element's playback area
disablePictureInPictureindicating whether the browser should suggest the picture-in-picture feature to users, or request it automatically.
networkState readyonlyindicates 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 readyonlyreturn the normalized TimeRanges object, if any, that browser has buffered at the moment of buffered property accessed
readyState readyonlyindicates 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 readonlyindicate the user is currently seeking in the audio/video.
currentTimeindicates the current playback time in seconds.
durationindicates the duration for media in seconds
paused readonlyindicates whether the media element is paused.
defaultPlaybackRateindicates the default playback rate for the media.
playbackRateindicates the default playback rate for the media
played readonlyreturn the normalized TimeRanges object, and tells you, which part of media have been played
seekable readonlyreturn the normalized TimeRanges object and tells you which parts of the media can be played without delay
ended readonlyindicates whether the media element has ended playback.
autoplayreflect the nature of auto play of media.
loopreflect the loop HTML attribute, which controls whether the media element should start over when it reaches the end.
controlsreflect the controls HTML attribute, which controls whether user interface controls for playing the media item will be displayed.
volumeindicates the volume at which the media will be played.
mutedindicates whether the media element muted.
defaultMutedreflects the muted HTML attribute, which indicates whether the media element's audio output should be muted by default


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