Sunday 29 January 2012

HTML5 Video + DOM

HTML5 <video> - Take Control Using the DOM

The HTML5 <video> element also has methods, properties, and events.
There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.
The examples below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.


HTML5 <video> - Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:
Methods Properties Events
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  
Note: Of the video properties, only videoWidth and videoHeight are immediately available. The other properties are available after the video's meta data has loaded.

No comments:

Post a Comment