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.

25 Replies to “HTML 5 Video – DOM Attributes and Events”

  1. Fatal error: Uncaught Error: Call to undefined function mysql_escape_string() in /www/htdocs/w00563cd/blog/wp-content/plugins/comment-reply-notification/comment-reply-notification.php:113 Stack trace: #0 /www/htdocs/w00563cd/blog/wp-includes/plugin.php(524): comment_reply_notification->email(393674) #1 /www/htdocs/w00563cd/blog/wp-includes/comment.php(1824): do_action(‘comment_post’, 393674, 0, Array) #2 /www/htdocs/w00563cd/blog/wp-includes/comment.php(2923): wp_new_comment(Array) #3 /www/htdocs/w00563cd/blog/wp-comments-post.php(20): wp_handle_comment_submission(Array) #4 {main} thrown in /www/htdocs/w00563cd/blog/wp-content/plugins/comment-reply-notification/comment-reply-notification.php on line 113

    when i submit comment it show the above error.

  2. Is it possible to encode information in stream which will be passed to html player and then trigger an event to pull it from there?

    1. Not that I am aware of. This would be problematic because of the different codecs and container formats so I assume there’s no regular way with the standard HTML5-player.

  3. Nice site! I want to detect a live video stream. Would this work?

    var video = documentGetElementById(“liveVideo”);
    if (liveVideo.readyState} {
    switch (liveVideo.readyState.readyState) {
    case HAVE_METADATA:
    alert(‘Got Video’);
    }};

    1. Hi –

      the HAVE_METADATA property doesn’t tell you if the stream is live (if that’s your question). But generally speaking your code (with one exception: there’s a .readyState too much) should work.

  4. Hi,
    I not a developper, just a web designer.
    From a video playing, I need to trigger placeholder states placed around the video. For example, at 2minutes 31 sec, I need to display a certain text in a zone and change it 15 seconds later.
    Is this possible with and how? Just need a general idea on what it is possible to do. Thanks.

    1. Hi –

      that could be done via Javascript, but depends of course on your website. I’d recommend asking a JS-developer, because the exact coding could be somewhat tricky, but it’s possible.

  5. can i get the duration of the video by:
    var myvid = document.getElementById(‘vid’);
    alert(myvid.duration);
    ………?

  6. Hi,

    Im trying to find some info on why when I use the vid.currentTime feature, my html5 video initially goes to the correct time, but then jumps back a few seconds (or more) before playing.

    I think it might be to do with key-frames, but if I use jwplayer – the files work fine and play from the point required.

    Im streaming from Wowza, and I need it to be exact.

    Have you seen anything like this before?

    1. Well this is a complex matter – it might have to do with the videoformat/codec or the respective player or the respective JS implementation in the browser..

      Maybe try with another video(format) first – and if it always happens, drop a comment here (or post an example link)..

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.