wats1010-embedded-media

This is the resource repository for the Embedded Media assignment, part of WATS 1010: Introduction to Web Development. Please note: This repository is large.

The goal of this assignment is to explore the features and capabilities available for embedding multimedia in HTML5 documents. We will experiment as we create a single, "long scrolling", page to promote the open source film, "Monkaa". This film was create by the Indian animation company Weybec and released under a Creative Commons Attribution license. This makes it a legal movie for us to experiment with.

Requirements

• Create an elegant presentation for the content on this page with clearly defined sections so it is easy for users to browse the contents.
• Fill in each respective section with appropriate content.
• Offer MP4 and WEBM video in a default HTML5 video player.
• Style the containers and presentation of the audio and video to highlight the experience, making it more enjoyable for users.
• Provide internal links for quick access to different portions of the page.
• Use positioning and hover effects to make a persistent "share" box with social network links.
• Complete all of the TODOs defined in the file.
• Choose image formats wisely given different use cases. When creating images, also choose wisely to use the appropriate format.
• Right now you have only been supplied with a 1080p WEBM format video. Convert that video to an MP4 so more browsers can display the video with a native videoplayer. (NOTE: Your MP4 version must be under 100mb, and it's best if it can be under 50mb, although in this one case it's OK as long as it's under 100mb in file size.)
• Resize and optimize the images you use throughout so they fit into their appropriate roles as efficiently as possible.
• Create a new favicon that better represents the page as you've designed it.

Stretch Goals

If you make it through all of the other stuff very quickly and easily, try to achieve this additional set of stretch goals.

• Add download icons to the download buttons.
• Use a video loop in the header (or somewhere else on the page) in order to create a compelling design.
• Explore how to make a "letterpress" or "cutout" text effect for the featured text in the About section and/or for the text in the page header.
• Add a homescreen icon for iOS and Android devices so when they save the page to their homescreen they get a custom icon that matches the favicon you designed.