HTML and CSS Reference
In-Depth Information
HAVE_METADATA (1)
and
and
HAVE_CURRENT_DATA(2)
HAVE_METADATA (1)
HAVE_CURRENT_DATA(2)
Metadata is available, and data for the immediate playback position is available—but not
enough data to be playable all the way through
HAVE_FUTURE_DATA(3)
Data for playback position is available, and enough data to advance the playback, but not
enough to play all the way through
HAVE_ENOUGH_DATA(4)
There is enough data to play the video all the way through
There are also events, such as
loadeddata
, that fire when the video is ready to play. However,
this event did not fire properly when testing with the target browsers, so I didn't enable its use
in the applications in this chapter.
WARNING
The HTMLMediaElement is in a great deal of flux at the time this was written. You'll need to check
the most recent HTML5 document to verify whether the properties, methods, and events listed in this
chapter have changed since this topic was written.
Adding CSS and Tracking Playback
The default controls for the media elements provide playback progress. This is rather an im-
portant feedback item for media elements, as without it, the web page reader doesn't have a
way of estimating how much longer the media resource will play. We want to add the same
type of feedback for the custom control.
The obvious semantic choice for tracking progress is the new HTML5
progress
element. For
user agents that implement the control, people will see a visual element in the given operating
system's preferred style. People using a browser that hasn't implemented the
progress
ele-
ment yet will see a text description of how long (in seconds) the media has played.
To add the progress functionality, add the progress element to the HTML, just after the video
element, and before the buttons:
<video id="videoobj" width="480" height="270"
poster="bigbuckposter.jpg"
controls>
<source src="videofile.mp4" type="video/mp4"/>
<source src="videofile.webm" type="video/webm" />
