86 Chapter 4—Video and Audio
4.7 Video and Scripting—A Simple Video Player
Not only can you display videos in the browser, you can also control them di-
rectly with JavaScript via the HTMLMediaElement interface. This section shows you
how this works. We will implement a simple JavaScript HTML5 video player with
the following features:z Start and stop the video
z Display and set the playback position on a control bar
z Fast forward and backward
z Select specific scenes in the movie
z Switch volume between high, low, and muteA suitable video for our video player is easily found: Big Buck Bunny—a roughly
ten-minute long computer-animated cartoon, which is the result of a free film
project, as its URL http://bigbuckbunny.org indicates. The project was initiated
by the Blender Foundation. From October 2007 to April 2008, seven 3D anima-
tion specialists used free software, like Blender, Gimp, Inkscape, or Python, all
running on Ubuntu, to create this film and made it available online under an
open license. A summary of the action, based on the motto funny and furry, can
be found on Wikipedia at http://en.wikipedia.org/wiki/Big_Buck_Bunny. But
our main concern is the video player. Figure 4.9 shows what it will look like.Figure 4.9 Screen shot of the JavaScript HTML5 video player