O'Reilly logo

HTML5 and JavaScript Projects by Jeanine Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required