Mixing HTML5 Video and Canvas - HTML5 Canvas - page 462

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 event that calls the eventWindowLoaded() function when the page loads
(this should look very familiar to you by now):

window . addEventListener ( 'load' , eventWindowLoaded , false false );

We need to set up a couple things in the eventWindowLoaded() function. First, we need to
add an event listener for a change to the videoSize form control we created in the HTML
page. A “change” to the control (for example, someone slides it right or left) will create an
event handled by the videoSizeChanged() event handler:

var var sizeElement = document . getElementById ( "videoSize" )

sizeElement . addEventListener ( 'change' , videoSizeChanged , false

false );

Next, we need to create a value that can be used to set both the width and the height of
the video at once. This is because we want to keep the proper aspect ratio of the video
(the ratio of width to height) when the video is resized. To do this, we create the variable
widthtoHeightRatio , which is simply the width of the video divided by the height:

var var widthtoHeightRatio = videoElement . width / videoElement . height ;

Finally, when the user changes the videoSize range control, the videoSizeChanged()
event handler is called. This function sets the width property of the video to the value of the
range control ( target.value ), sets the height of the video to the same value, and then di-
vides by the widthtoHeightRatio value we just created. The effect is that the video resizes
while playing. Figure 6-4 captures one moment of that:

function function videoSizeChanged ( e ) {

var var target = e . target ;

var var videoElement = document . getElementById ( "theVideo" );

videoElement . width = target . value ;
videoElement . height = target . value / widthtoHeightRatio ;