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

Custom Search