Mixing HTML5 Video and Canvas - HTML5 Canvas

HTML and CSS Reference

In-Depth Information

To support all three formats at once, we must use an alternative method for setting the

src attribute of the <video> tag. Why? Because we need to specify three different video

formats instead of one in our HTML page. To do this, we add <source> tags within the

<video> tag:

</video>

We put the .mp4 file first in the src list because on certain iOS (iPhone,

iPad) devices, the browser will not attempt to load any other src type

than the first one listed. Since those devices support .mp4 files, we list

them first to get the broadest support for HTML5 video.

When a web browser reads this HTML, it will attempt to load each video in succession.

If it does not support one format, it will try the next one. Using this style of embed

allows the code in Example 6-1 to execute on all HTML5-compliant browsers.

Also notice that we have set the width and height properties of the video. While these

are not necessarily needed (as we saw earlier), it is proper HTML form to include them,

and we will need them a bit later when we start to manipulate the video size in code.

Example 6-1. Basic HTML video

<!doctype html>

<head>

<title>CH6EX1: Basic HTML5 Video</title>

</head>

<body>

<div>

</video>

</div>

<div>

(Right-click To Control)

</div>

</body>

</html>

Figure 6-1 is an example of the plain-vanilla video embed in an HTML5 page. There

are no controls displayed in the default settings, but if you right-click on the video,

controls will appear that can be used in conjunction with the embedded video.

Search WWH ::

Custom Search

Home