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.
| Events | Description |
|---|
canplay | This 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.) |
error | This event is sent when an error has occurred; there’s also an error attribute. |
loadeddata | The first frame of the media has loaded. |
loadedmetadata | This event is sent when the media’s metadata has finished loading. This would include dimensions, duration, and any text tracks (for captions). |
playing | This 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. |
seeking | This 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. |
seeked | This 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.
| Attribute | Description |
|---|
playbackRate | The 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. |
src | As 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. |
currentSrc | This 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. |
readyState | This 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. |
duration | This returns the length of the video in seconds. |
buffered | This represents the time ranges of the video that have buffered and are available for the browser to play. |
videoWidth, videoHeight | These 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. |
