March 27, 2010: Afternoon Hands-on session: Video player

Goal

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:

   • Why OGG and MPEG 4?

   • Which video format is recommended by W3C?
   • How do I convert a video in MPEG 4 and OGG?
   • What should I do if the HTML 5 video element isn't supported?
2. Make one HTML button to play or pause the video, and hide the default video controls of the browser;

   See also:

   • How do I change the text of an HTML button?
3. Reacts to video events targeted at the video element.
   • How do I attach an event listener to an element?
   • Event summary for media elements

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;

   Tips:

   • 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 events.
   • Use the display with the values none or inline in order to display or hide SVG shapes.

   See also:

   • What shoud I use to edit SVG?
2. The button should react when the mouse is over it.

   Tips:

   • 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

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

   Tips:

   • Use the file extension .xhtml
   • Don't forget to add the XHTML namespace
2. Bind the video state to the state of your SVG interface;

   See also:

   • How do I display/hide an SVG shape?
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.

Accessibility

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

   See also:

   • WAI-ARIA Role, State, and Property Quick Reference

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.