HTML5 introduces built-in media support via the
<video> elements, offering the ability to easily embed and manipulate media on web pages (Mozilla.org). In this lab, you will create a web page that annotates a video with text and perhaps other media.
The video that you will annotate is Mariah Carey's "Emotion" --from New Year Eve 2016. She didn't even sing. You have one job: show the words to the song, line by line, below the video in the "lyrics"
div. Lyrics to her song (well, the first half of the song) is below. If you do not know the song, the official music video (1991) is available at https://www.youtube.com/watch?v=NrJEFrth27Q.
You are free to use the following to access the video on your page and there is no need to make a copy of the video onto your computer:
<video src="https://www.cs.tufts.edu/comp/20/fail.mp4" id="failvideo" controls> </video>
You've got me feelin' emotions (starts at ~9 second mark in video) Deeper than I've ever dreamed of You've got me feelin' emotions Higher than the heavens above I feel good, I feel nice I've never felt so satisfied I'm in love, I'm alive Intoxicated, flyin' high Feels like a dream (at ~44 second mark in video, you can hear it) When you touch me tenderly I don't know if it's real But I like the way I feel inside You've got me feelin' emotions Deeper than I've ever dreamed of You've got me feelin' emotions Higher than the heavens above
Once again, I am going to give you the HTML so you do not have to write it! Copy and paste the following HTML below as your
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Fail</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1 id="title">Fail</h1> <video src="https://www.cs.tufts.edu/comp/20/fail.mp4" id="failvideo" controls></video> <div id="lyrics"></div> <script> // Complete this section and create a CSS file named style.css </script> </body> </html>
<div id="lyrics">. You must annotate the video line-by-line corresponding to the respective characters. Finally, you must provide some styling for the page via
Each assignment and lab shall include a
README file that describes the work. This description must:
README.txt) or in Markdown (
README.md). Markdown is preferred. No other formats will be accepted. Please use all capital letters for
README file must be directly in the folder of the lab or assignment.
Push all your files to a folder named
annotation inside of the private GitHub repo I created for you. Say that your private repository is named
comp20-mchow, make sure all the files are pushed to
# Inside your private GitHub repo folder (e.g.,
comp20-mchow) git add . git commit -m "Some good commit message here" git push
This lab is worth 5 points.
index.htmlpage following all the instructions above