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

Before starting

Network access: CAMBRIDGE network, passwd: dm327.

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

  1. Make an HTML page with the HTML 5 video element, using ogg and MPEG 4;

    See also:

  2. Make one HTML button to play or pause the video, and hide the default video controls of the browser;

    See also:

  3. Reacts to video events targeted at the video element.

See the HTML 5 video element.

The SVG Interface

  1. Design a more attractive player interface using SVG 1.1 so that it represents a button to play or pause the video;


    See also:

  2. The button should react when the mouse is over it.


See the SVG button.

HTML and SVG together

  1. Put your HTML and SVG together in an XHTML document;


  2. Bind the video state to the state of your SVG interface;

    See also:

  3. Make the video reacts to your SVG button;
  4. Remove the HTML paragraph and HTML button (those were added in step 2.2).

See the HTML 5/SVG video player.


  1. Using WAI ARIA, add a role, state;

    See also:

See the HTML 5/SVG video player with WAI ARIA support.

A more complex approach

The video player demonstrated in the morning is also available. It demonstrate multiple events from the video element, including timing and volume controls.