{"id":4232,"date":"2010-03-01T19:02:37","date_gmt":"2010-03-01T18:02:37","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?p=4232"},"modified":"2016-12-31T02:19:20","modified_gmt":"2016-12-31T01:19:20","slug":"html-5-video-dom-attributes-and-events","status":"publish","type":"post","link":"https:\/\/www.chipwreck.de\/blog\/2010\/03\/01\/html-5-video-dom-attributes-and-events\/","title":{"rendered":"HTML 5 Video \u2013 DOM Attributes and Events"},"content":{"rendered":"

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

Attributes<\/h4>\n

Additional to the standard attributes (like width, height, id…) there are some attributes specific to the video-tag.<\/p>\n

To be precise: These attributes are not all specific to the video tag, some are also used for the audio-tag.<\/p>\n

Display attributes<\/h5>\n

src<\/kbd> (string)<\/small>: The source file<\/p>\n

poster<\/kbd> (URL)<\/small>: An image to display before the video is playing<\/p>\n

controls<\/kbd> (boolean)<\/small>: Are the playback-controls being provided by the browser?<\/p>\n

videoWidth, videoHeight<\/kbd> (integer)<\/small>: The original video size<\/p>\n

Playback attributes<\/h5>\n

currentTime<\/kbd> (float)<\/small>: The current playback time in seconds<\/p>\n

startTime*<\/kbd> (float)<\/small>: The video start time (if the video does not start at 0.0 – streams for example)<\/p>\n

duration<\/kbd> (float)<\/small>: The duration in seconds<\/p>\n

paused<\/kbd> (boolean)<\/small>: Is the video currently paused?<\/p>\n

ended<\/kbd> (boolean)<\/small>: Has the video ended?<\/p>\n

autoplay<\/kbd> (boolean)<\/small>: Is is set to autoplay?<\/p>\n

loop<\/kbd> (boolean)<\/small>: Is is set to play in a loop?<\/p>\n

autobuffer<\/kbd> (boolean)<\/small>: Should the browser start buffering the video immediately?<\/p>\n

seeking<\/kbd> (boolean)<\/small>: Is the browser currently seeking in the video?<\/p>\n

defaultPlaybackRate*<\/kbd> (float)<\/small>: The playback speed at which the video should be played<\/p>\n

playbackRate*<\/kbd> (float)<\/small>: 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<\/p>\n

seekable*<\/kbd> (TimeRanges)<\/small>: An object of ranges in which the browser can seek (more about this below)<\/p>\n

buffered*<\/kbd> (TimeRanges)<\/small>: An object of ranges which are already buffered<\/p>\n

played*<\/kbd> (TimeRanges)<\/small>: An object of ranges which the user has already played<\/p>\n

Other attributes<\/h5>\n

volume<\/kbd> (float)<\/small>: The current volume — from 0.0 to 1.0<\/p>\n

muted<\/kbd> (boolean)<\/small>: Is the video muted? Takes precedence of the volume<\/p>\n

readyState<\/kbd> (int)<\/small>: State of the video (explanation below)<\/p>\n

networkState<\/kbd> (int)<\/small>: State of the network (explanation below)<\/p>\n

error<\/kbd> (MediaError)<\/small>: A media error object if something went wrong<\/p>\n

*: This attribute is currently not working in Firefox<\/p>\n

Usage of the attributes<\/h4>\n

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

You can access these attributes in Javascript like this:<\/p>\n

\r\nvar myvid = document.getElementById('vid');\r\nmyvid.muted = false;\r\nmyvid.currentTime = 0.0;\r\nif (myvid.ended) { ... }\r\n<\/pre>\n
Error codes<\/h4>\n
If an error occured, you can read the error code to react — these error codes are currently supported:<\/p>\n
MEDIA_ERR_ABORTED (1)<\/kbd> User aborted video playback<\/p>\n
MEDIA_ERR_NETWORK (2)<\/kbd> Network error (could not read the stream)<\/p>\n
MEDIA_ERR_DECODE (3)<\/kbd> Decoding error, video is broken or the codec makes problems<\/p>\n
MEDIA_ERR_SRC_NOT_SUPPORTED (4)<\/kbd> The format is not supported<\/p>\n
Usage (you better use events therefore, but more of this later):<\/p>\n
\r\nvar myvid = document.getElementById('vid');\r\nif (myvid.error) {\r\n switch (myvid.error.code) {\r\n\tcase MEDIA_ERR_ABORTED:\r\n\t\talert(\"You stopped the video.\");\r\n\t\tbreak;\r\n\tcase MEDIA_ERR_NETWORK:\r\n\t\talert(\"Network error - please try again later.\");\r\n\t\tbreak;\r\n\tcase MEDIA_ERR_DECODE:\r\n\t\talert(\"Video is broken..\");\r\n\t\tbreak;\r\n\tcase MEDIA_ERR_SRC_NOT_SUPPORTED:\r\n\t\talert(\"Sorry, your browser can't play this video.\");\r\n\t\tbreak;\r\n }\r\n}\r\n<\/pre>\n
Network and Ready states<\/h4>\n
These states are defined as follows (first the network then the ready states):<\/p>\n
NETWORK_EMPTY (0)<\/kbd> Not yet initialized<\/p>\n
NETWORK_IDLE (1)<\/kbd> Network is not being used now (video is completely loaded for example)<\/p>\n
NETWORK_LOADING (2)<\/kbd> Browser is loading data from the net<\/p>\n
NETWORK_LOADED (3)<\/kbd> Data has been loaded<\/p>\n
NETWORK_NO_SOURCE (4)<\/kbd> Video resource could not be found\/loaded<\/p>\n
The documentation of the network states is not correct on  most sites, so better refer to the states above.<\/p>\n
HAVE_NOTHING (0)<\/kbd> No data available<\/p>\n
HAVE_METADATA (1)<\/kbd> Duration and dimensions are available<\/p>\n
HAVE_CURRENT_DATA (2)<\/kbd> Data for the current position is available<\/p>\n
HAVE_FUTURE_DATA (3)<\/kbd> Data for the current and future position is available, so playback could start<\/p>\n
HAVE_ENOUGH_DATA (4)<\/kbd> Enough data to play the whole video is available<\/p>\n
Events<\/h4>\n
To control the video playback we also need events, here a list of the provided events:<\/p>\n
loadstart<\/kbd> Browser starts loading data<\/p>\n
progress<\/kbd> Browser loads data<\/p>\n
suspend<\/kbd> Browser does not load data, waiting<\/p>\n
abort<\/kbd> Data loading was aborted<\/p>\n
error<\/kbd> An error occured<\/p>\n
emptied<\/kbd> Data not present unexpectedly<\/p>\n
stalled<\/kbd> Data transfer stalled<\/p>\n
play<\/kbd> Video started playing (fired with play())<\/p>\n
pause<\/kbd> Video has paused (fired with pause())<\/p>\n
loadedmetadata<\/kbd> Metadata loaded<\/p>\n
loadeddata<\/kbd> Data loaded<\/p>\n
waiting<\/kbd> Waiting for more data<\/p>\n
playing<\/kbd> Playback started<\/p>\n
canplay<\/kbd> Video can be played, but possibly must stop to buffer content<\/p>\n
canplaythrough<\/kbd> Enough data to play the whole video<\/p>\n
seeking<\/kbd> seeking is true (browser seeks a position)<\/p>\n
seeked<\/kbd> seeking is now false (position found)<\/p>\n
timeupdate<\/kbd> currentTime was changed<\/p>\n
ended<\/kbd> Video has ended<\/p>\n
ratechange<\/kbd> Playback rate has changed<\/p>\n
durationchange<\/kbd> Duration has changed (for streams)<\/p>\n
volumechange<\/kbd> Volume has changed<\/p>\n
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<\/a>, there you can see the video attributes and fired events by trying out the buttons.<\/p>\n
Also a good read is this article from Dev.Opera: dev.opera.com\/articles\/view\/introduction-html5-video »<\/a><\/p>\n
While this post is quite theoretical the next one<\/a> (next week probably)<\/del> will be more hands-on — it will present some Javascript\/Mootools-code which lets you write your own video player controls.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8,14],"tags":[55,10,54,79],"class_list":["post-4232","post","type-post","status-publish","format-standard","hentry","category-webdevelopment","category-javascript","tag-javascript-mootools","tag-mootools","tag-track","tag-webdesign"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paPEN-16g","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/4232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=4232"}],"version-history":[{"count":0,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/posts\/4232\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=4232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/categories?post=4232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/tags?post=4232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}