HTML 5 Video – DOM Attributes and Events

The last last post was about the HTML 5 video tag, now we’ll have a look at the DOM side of things: Attributes and Events.

Attributes

Additional to the standard attributes (like width, height, id…) there are some attributes specific to the video-tag.

To be precise: These attributes are not all specific to the video tag, some are also used for the audio-tag.

Display attributes

src (string): The source file

poster (URL): An image to display before the video is playing

controls (boolean): Are the playback-controls being provided by the browser?

videoWidth, videoHeight (integer): The original video size

Playback attributes

currentTime (float): The current playback time in seconds

startTime* (float): The video start time (if the video does not start at 0.0 – streams for example)

duration (float): The duration in seconds

paused (boolean): Is the video currently paused?

ended (boolean): Has the video ended?

autoplay (boolean): Is is set to autoplay?

loop (boolean): Is is set to play in a loop?

autobuffer (boolean): Should the browser start buffering the video immediately?

seeking (boolean): Is the browser currently seeking in the video?

defaultPlaybackRate* (float): The playback speed at which the video should be played

playbackRate* (float): The current playback speed: 1.0 is normal, 2.0 is two times faster forward, -3.0 is three times faster backwards and so on

seekable* (TimeRanges): An object of ranges in which the browser can seek (more about this below)

buffered* (TimeRanges): An object of ranges which are already buffered

played* (TimeRanges): An object of ranges which the user has already played

Other attributes

volume (float): The current volume — from 0.0 to 1.0

muted (boolean): Is the video muted? Takes precedence of the volume

readyState (int): State of the video (explanation below)

networkState (int): State of the network (explanation below)

error (MediaError): A media error object if something went wrong

*: This attribute is currently not working in Firefox

Usage of the attributes

As you can imagine, some attributes as read-only (duration, ended, readyState) – some can be read and written, like volume, currentTime.

You can access these attributes in Javascript like this:

var myvid = document.getElementById('vid');
myvid.muted = false;
myvid.currentTime = 0.0;
if (myvid.ended) { ... }

Error codes

If an error occured, you can read the error code to react — these error codes are currently supported:

MEDIA_ERR_ABORTED (1) User aborted video playback

MEDIA_ERR_NETWORK (2) Network error (could not read the stream)

MEDIA_ERR_DECODE (3) Decoding error, video is broken or the codec makes problems

MEDIA_ERR_SRC_NOT_SUPPORTED (4) The format is not supported

Usage (you better use events therefore, but more of this later):

var myvid = document.getElementById('vid');
if (myvid.error) {
 switch (myvid.error.code) {
	case MEDIA_ERR_ABORTED:
		alert("You stopped the video.");
		break;
	case MEDIA_ERR_NETWORK:
		alert("Network error - please try again later.");
		break;
	case MEDIA_ERR_DECODE:
		alert("Video is broken..");
		break;
	case MEDIA_ERR_SRC_NOT_SUPPORTED:
		alert("Sorry, your browser can't play this video.");
		break;
 }
}

Network and Ready states

These states are defined as follows (first the network then the ready states):

NETWORK_EMPTY (0) Not yet initialized

NETWORK_IDLE (1) Network is not being used now (video is completely loaded for example)

NETWORK_LOADING (2) Browser is loading data from the net

NETWORK_LOADED (3) Data has been loaded

NETWORK_NO_SOURCE (4) Video resource could not be found/loaded

The documentation of the network states is not correct on most sites, so better refer to the states above.

HAVE_NOTHING (0) No data available

HAVE_METADATA (1) Duration and dimensions are available

HAVE_CURRENT_DATA (2) Data for the current position is available

HAVE_FUTURE_DATA (3) Data for the current and future position is available, so playback could start

HAVE_ENOUGH_DATA (4) Enough data to play the whole video is available

Events

To control the video playback we also need events, here a list of the provided events:

loadstart Browser starts loading data

progress Browser loads data

suspend Browser does not load data, waiting

abort Data loading was aborted

error An error occured

emptied Data not present unexpectedly

stalled Data transfer stalled

play Video started playing (fired with play())

pause Video has paused (fired with pause())

loadedmetadata Metadata loaded

loadeddata Data loaded

waiting Waiting for more data

playing Playback started

canplay Video can be played, but possibly must stop to buffer content

canplaythrough Enough data to play the whole video

seeking seeking is true (browser seeks a position)

seeked seeking is now false (position found)

timeupdate currentTime was changed

ended Video has ended

ratechange Playback rate has changed

durationchange Duration has changed (for streams)

volumechange Volume has changed

So – lots of events and attributes as you can see. In order to let this not become too abstract, head to the video test area, there you can see the video attributes and fired events by trying out the buttons.

Also a good read is this article from Dev.Opera: dev.opera.com/articles/view/introduction-html5-video »

While this post is quite theoretical the next one (next week probably) will be more hands-on — it will present some Javascript/Mootools-code which lets you write your own video player controls.