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 = e.target;
var videoElement = document.getElementById("theVideo");
videoElement.width = target.value;
videoElement.height = target.value/widthtoHeightRatio;
}
