Media Elements API

Events
Similar to the events canplaythrough, play, pause, volumechange, ended, and timeupdate events. Here are some of the other events available to you when working with HTML5 video and audio.

EventsDescription
canplayThis is similar to canplaythrough, but will fire as soon as the video is playable, even if it’s just a few frames. (This contrasts with canplaythrough, as you’ll remember, which only fires if the browser thinks it can play the video all the way to the end without rebuffering.)
errorThis event is sent when an error has occurred; there’s also an error attribute.
loadeddataThe first frame of the media has loaded.
loadedmetadataThis event is sent when the media’s metadata has finished loading. This would include dimensions, duration, and any text tracks (for captions).
playingThis indicates that the media has begun to play. The difference between playing and play is that play will not be sent if the video loops and begins playing
again, whereas playing will.
seekingThis is sent when a seek operation begins. It might occur when a user starts to move the seek bar to choose a new part of the video or audio.
seekedThis event fires when a seek operation is completed.


Attributes
In addition to the attributes we’ve already seen, here’s a number of useful ones available to you.

AttributeDescription
playbackRateThe default playback rate is 1. This can be changed to speed up or slow down playback. This is naturally of practical use if you’re creating a fast-forward or rewind button, or a slow-motion or slow-rewind button.
srcAs its name implies, this attribute returns the URL that points to the video being played. This only works if you’re using the src attribute on the video element.
currentSrcThis will return the value of the URL pointing to the video file being played, whether it’s from the video element’s src attribute or one of the source elements.
readyStateThis attribute returns a numeric value from 0 to 4, with each state representing the readiness level of the media element. For example, a value of “1” indicates that the media’s metadata is available. A value of “4” is virtually the same as the condition for firing the canplaythrough event, meaning the video is ready to play, and won’t be interrupted by buffering or loading.
durationThis returns the length of the video in seconds.
bufferedThis represents the time ranges of the video that have buffered and are available for the browser to play.
videoWidth, videoHeightThese values return the intrinsic dimensions of the video, the actual width and height as the video was encoded—not what’s declared in the HTML or CSS. Those values can be accessed through the customary width and height attributes. You can also access attributes that are able to be declared directly in the HTML, such as preload, controls, autoplay, loop, and poster.
Related Tutorial