Introduction

The project for this chapter is a display of a video clip in the shape of a ball bouncing in a box. An important new feature in HTML5 is the native support of video (and audio). The book The Definitive Guide to HTML5 Video, by Silvia Pfeiffer (Apress, 2010), is an excellent reference. The challenge in this project is making the video clip move on the screen. I will describe two different ways to implement the application. The screenshots do not reveal the differences.

Figure 3-1 shows what the application looks like in the full-window view in Opera. The video is a standard rectangular video clip. It appears ball-like because of my coding. You can skip ahead to Figure 3-8 to get an idea of the mask created to ride along with the video. ...

Get HTML5 and JavaScript Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.