HTML5 Canvas, 2nd Edition

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 src="muirbeach.mp4" />

Note

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

There are many properties that can be set in an HTML5 video embed. These properties are actually part of the HTMLMediaElement interface, implemented by the HTMLVideoElement object. 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

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.

pause()

A method used to pause a video that is playing.

Additionally, there are some properties you can use to check the status of a video, including:

duration

The length of the video in seconds.

currentTime

The current playing time of the video in seconds. This can be used in conjunction with duration for some interesting ...