COAP:COAP-3000/week2: Difference between revisions
Jump to navigation
Jump to search
| Line 18: | Line 18: | ||
=== Presentation and demo === | === Presentation and demo === | ||
* Wiki | * Wiki pages used: | ||
** [[HTML5 audio and video]] | |||
** [[WebVTT]] | |||
* Understanding the HTML5 <code>video</code> element | * Understanding the HTML5 <code>video</code> element | ||
* Understanding tracks and the tracks element | * Understanding tracks and the tracks element | ||
Revision as of 18:25, 25 March 2018
Week 2 topics - Create HTML5 videos
This week you will learn how to create an HTML5 page that includes an (HTML5) video that includes tracks (subtitle) and some custom interactivity.
Monday
Presentation and demo
- Wiki pages used:
- Understanding the HTML5
videoelement - Understanding tracks and the tracks element
Demo
- Create a short video that uses tracks. Start from the following code fragment if you like:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>........</title>
</head>
<body>
<h1>.........</h1>
<p>....</p>
<video id="movie1" controls preload="metadata">
<source src=".... .mp4"/>
<source src=".... .webm"/>
<track kind="subtitles" label="EN subtitles" src="....vtt" srclang="en" default/>
</video>
<hr/>
<a href="http://validator.w3.org/check?uri=referer">W3C validator</a>
</body>
</html>
Wednesday
Add some JavaScript to manipulate the video.
Homework/project 2
Project #2 will allow you to consolidate work started in the classroom.
Task
(1) Create an HTML5 video using the video, source and track elements
- The video must include at least four captions (sutitles)
- The page must include JavaScript code to manipulate the video
- You can freely choose a topic and reuse prior work.
(2) Create a report as screen cast (Alternatively write a written report of 400 to 500 words plus screen captures)
- The report should include objectives (what is it's purpose ? audience ?) of the video, a short discussion of your design and an auto-evaluation. You also can mention how you did it, problems encountered. etc. Make sure to keep down the file size.
- Max. length of the screen cast= 2 minutes. Make sure to "dive in" directly. Do not waste time on less important stuff, e.g. your personal motivations, prior experience, etc.
Submission
Upload to the World classroom (Canevas):
- A zip file for the HTML,CSS,video,JavaScript, etc. (must be functional after dezipping)
- A report as screen cast file or written report.
Tip: Unzip the file somewhere in your own computer and test if it works (e.g. some files may be missing and the presentation will fail)
Due:
- Wednesday week 3, before class
Evaluation
- Contents: Does the presentation make an interesting "point" ?
- Technical modifications: Does the CSS include interesting modifications ? Did you define a new class ?
- Quality of the visual design: Is the presentation visually appealing. Does it go beyound simple slides.
- Report: Does the report state the objectives, shortly present the design, include an auto-evaluation
- In time: Was the project turned in before wed, week2, 9h ?
Resources
Introductions to HTML5 video
- HTML for Masterminds, Chapter 6
- HTML5 audio and video (Instructor's lecture notes, this wiki)