March 27, 2010: Afternoon Hands-on session: Video player
Developer a simple video player interface using SVG for the HTML 5 video element.
Step by step
CAMBRIDGE network, passwd:
You need a browser that supports SVG and the HTML 5 Video. At the
moment, the latest versions of Apple/Safari, Google/Chrome, Opera (10.50 and up), and Mozilla/Firefox
can do so, when using the XHTML mode. The platform
preview of Internet Explorer 9 does not support the HTML 5 video element
yet. So, install one of those if you don't have it already.
The HTML 5 video element
- Make an HTML page with the HTML 5 video
element, using ogg and MPEG
- Make one HTML button to play or pause the video, and hide the default video controls of the browser;
- Reacts to video events targeted at the video element.
See the HTML 5 video element.
The SVG Interface
- Design a more attractive player interface using SVG 1.1 so that it
represents a button to play or pause the video;
- Provide meaningful identifiers when drawing SVG shapes in your
editor, so that you can find them later in the SVG code.
- Recover your drawing with a rectangle in order to capture
mouse events on it (ie the last shape of your drawing should a
rectangle cover the entire SVG area). Use the attribute
pointer-events="all" in order to capture all mouse
- Use the
display with the values
inline in order to display or hide SVG shapes.
- The button should react when the mouse is over it.
- Use the CSS pseudo-class
:hover to change the style of an element
when you mouse over it.
See the SVG button.
HTML and SVG together
- Put your HTML and SVG together in an XHTML document;
- Bind the video state to the state of your SVG interface;
- Make the video reacts to your SVG button;
- Remove the HTML paragraph and HTML button (those were added in step 2.2).
See the HTML 5/SVG video player.
- Using WAI ARIA, add a role, state;
See the HTML 5/SVG video player with WAI ARIA support.
A more complex approach
player demonstrated in the morning is also available. It
demonstrate multiple events from the video element, including timing
and volume controls.