Mixing HTML5 Video and Canvas - HTML5 Canvas - page 453

Basic HTML5 Video Implementation

In the <video> tag's most minimal implementation, it requires only a valid src attribute. For
example, if we took a nifty little video of the waves crashing at Muir Beach, California (just
north of San Francisco), and we encoded it as an H.264 .mp4 file, the code might look like
this:

<video <video src= "muirbeach.mp4" //>

NOTE
To see an example of this basic code, look at the CH6EX1.html file in the code distribution.

TherearemanypropertiesthatcanbesetinanHTML5videoembed.Thesepropertiesareac-
tually part of the HTMLMediaElement interface, implemented by the HTMLVideoElement ob-
ject. Some of the more important properties include:

src

The URL to the video that you want to play.

autoplay

true or false . Forces the video to play automatically when loaded.

loop

true or false . Loops the video back to the beginning when it has finished playing.

volume

A number between 0 and 1. Sets the volume level of the playing video.

poster poster

A URL to an image that will be shown while the video is loading.

There are also some methods of HTMLVideoElement that are necessary when playing video in
conjunction with JavaScript and Canvas:

play()

A method used to start playing a video.