Online Book Reader

Home Category

HTML5 Canvas [96]

By Root 6449 0
Figure 6-2 shows what a video with controls looks like in Google Chrome.

Figure 6-2. HTML5 video embed with controls

You can see the full code in Example 6-2.

Example 6-2. HTML video with controls, loop, and autoplay

CH6EX2: Basic HTML5 Video With Controls

(Autoplay, Loop, Controls)

Altering the Width and Height of the Video


In our first example, we showed how you could embed a video without changing the default width or height. However, there are many good reasons why you might want to change the default width and height of a video in the HTML page, such as fitting it into a particular part of the page, or enlarging it so it is easier to see. Similar to embedding an image into HTML with the tag, a video will scale to whatever width and height you provide in the

In Example 6-3 (CH6EX3.html) we have scaled the same video to three different sizes and displayed them on the same page. Figure 6-3 shows what this looks like in HTML (again, rendered in the Google Chrome browser).

Example 6-3. Basic HTML5 video in three sizes

CH6EX3: Basic HTML5 Video: 3 Sizes

(640×480)

(320×240)

(180×120)

Figure 6-3. Controlling video width and height in the embed

Dynamically scaling a video


Now it is time for a more elaborate (and we think more effective) example of scaling a video. By changing the width and height attributes of the

First, we need to add an HTML5 range control to the page:

Video Size: min="80"

max="1280"

step="1"

value="320"/>

We discussed the details of the range control in Chapter 3, but just to refresh your memory, range is a new form control added to HTML5 that creates a slider of values. We are going to use this slider to set the video size.

NOTE

If the browser does not support the range element, a text box will appear that will allow the user to enter text directly.

To capture the change to the video size, we need to add some JavaScript. We create an event listener for the load

®Online Book Reader