HTML and CSS Reference
In-Depth Information
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.
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);
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 (e.g., someone slides it right or left) will create
an event handled by the videoSizeChanged() event handler:
var sizeElement = document.getElementById("videoSize")
sizeElement.addEventListener('change', videoSizeChanged, 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 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 ), then sets the height of the video to the same value,
and divides 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 videoSizeChanged(e) {
var target =;
var videoElement = document.getElementById("theVideo");
videoElement.width = target.value;
videoElement.height = target.value/widthtoHeightRatio;
Search WWH ::

Custom Search