Class Activity 1

Instructions

Step 1: VidQuiz

Make a folder in your or your pair's repository called ca1. Inside, create a file named player.html. Referencing the YouTube IFrame Player API Links to an external site., embed a YouTube video without controls. Remove the pause functionality from the API example. Open your page in a browser to make sure it's working before moving on.

Then add the following button on your page to interact with that video:

• play
• pause
• restart
• increase playback speed (max: 2)
• decrease playback speed (min: 0)

Here's an example of what your page might look like:

Step 2: Submitting

Stop wherever you are at the end of 40 minutes. Add a README.md file with the following information:

• who you worked with (say "I worked alone" if you didn't have a partner)
• how long you spent on the assignment
• what the most challenging aspects were
• any lingering questions you have about the assignment

You will need to include a similar README.md file for all of your assignments (see this video for details Links to an external site.). Commit your work, push it to GitHub, and then submit a link to your folder for this assignment on GitHub.

Programming assignment options

PA1.1: Add support for Vimeo

Copy your completed ca1 folder to a new folder pas/pa1.1. Update VidQuiz to include a text input field to the top of the page and a button next to it. When the user clicks the button, one of three things should happen:

• if the URL is a YouTube link (starts with https://youtu.be or https://youtube.com), the video is loaded in the player using the YouTube IFrame Player API
• if the URL is a Vimeo link (starts with https://vimeo.com), the video is loaded in the player using the Vimeo SDK Links to an external site.
• if the URL isn't one of the supported links, an error message is displayed (a popup is fine)

Here's the rubric:

[ ] loads a YouTube link into the player when "load" is clicked
[ ] loads a Vimeo link into the player when"load" is clicked
[ ] displays an informative error message if the URL is neither a YouTube nor Vimeo link when "load" is clicked
[ ] the builtin controls of YouTube videos are hidden; they are shown for Vimeo videos
[ ] the custom controls work with whatever video has loaded **Note that Vimeo speed controls will only work if the user has a PRO account**
[ ] the code is well commented and styled
[ ] there is a header at the top of the file that includes the name of the author(s) and a brief description of the file
[ ] the PA folder includes a README.md file with the required information in it

Submitting PAs

Be sure to create a README.md with the following information:

• who you worked with (say "I worked alone" if you didn't have a partner)
• how long you spent on the assignment
• the PA option (and, if applicable, the earlier PA option it builds off of; see this video for details Links to an external site.)
• a copy of the PA option's rubric, filled out (only submit if you can honestly check off each of the criteria)
• what the most challenging aspects were
• any lingering questions you have about the assignment