IT-202: Assignment #4, Spring Quarter 2025

Overview

For this assignment you will create a page that demonstrates that you have practiced and can apply several techniques we have discussed over the past 2-3 weeks. There will be certain techniques that we have not explicitly discussed or demonstrated in lecture, but, if you have been practicing and experimenting, there is nothing here that should be very difficult. Also, I will give you various hints along the way.

NOTE: Some of the techniques I ask you to demonstrate are NOT ideal techniques for a real-world page. For example, at one point I ask you to use a "double click" event on one of the buttons. In fact, we should rarely (probably never) use double-click functionality on web pages. But again, this is all about demonstrating you can apply different kinds of functionality if you need to.

Create a page in which you have a video (whout embedded controls). You are welcome to use my "fordo.mp4" video or one of your own. If you want my video, you can find a link to it under "Lecture #6" on the course web page.

Play and Pause Buttons: Have a couple of small images to represent "play" and "pause" functionality. Feel free to use ones of your own, or you can download and use mine here. Download Play button. Download Pause button. (Note: These were both found under "Creative Commons License". But even so, I would not adivse using them commercially!). You will want to resize these. Obviously, you will want to make them approximately identical in size on your web page. As you might imagine, the play button should play the video, and the pause button should pause it.

Button to show the current playing time: Have a button that says "Double-click this button to show the time". As you might expect, when the user double-clicks the butotn, the time should be displayed. Display to a <div> section below. To find the proper name for the listener for a double-click, go to https://developer.mozilla.org/en-US/docs/Web/API/Document#events, and look under a section called "Bubbled Events". It shouldn't be hard to find!

Also, the time should be set to 2 decimal places. I demonstrated code to use decimal places in some of the examples in our video events lecture (week #6). You should, hopefully, not have a very difficult time adjusting that code to work for your homework assignment.

Select box for playing speed: Have a select box that has three options for playing speed: "Normal Speed", "Half Speed", and "Double Speed". Note: Be sure to assign the value attribute for each of these options as: "1" (for the normal speed option), "0.5" (for the half speed option), and "2" (for the double speed option). Also, be sure the "Normal Speed" option is the first one listed. Otherwise, you may run into some strange behavior (feel free to try it if you like!)

Hint: Remember that you can retrieve the value of a select box in the exact same way we retrieve values from text field elements. Just be sure you set the value attribute for each option exactly as specified above. Store that value in a variable, and then assign that variable to the playbackRate property.

Text field allowing the user to jump to a specific time: For example, if the user enters 20 and clicks "Jump", the video should jump to 20 seconds. For now we won't worry about the user enteirng numbers that don't make sense such as negative numbers, or numbers that exceed the length of the video.

Here is a screen grab showing what the page should look like when it loads:

 

 

Video demonstrating: I have also created a short video describing this page in action. I will send you this video via a News posting.

 

Other Notes

Submission Requirements