COAP:COAP-3000/week2
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 of the technology and demo
- Wiki pages used:
- Understanding the HTML5
videoelement - Understanding tracks and the tracks element
Video convertors and editors
We recommend using browser extensions for simple tasks since they can be installed on any computer you use. They are often cross platform. However, some extensions include many advertisement and others can track your web navigation, so be a bit careful. Generally, we recommend using Firefox, since it's the only major open source browser.
Firefox convertor extension (open with Firefox)
Firefox - Video editor OpenShot online https://addons.mozilla.org/en-US/firefox/addon/openshot-video-editor/?src=search
You will find the extensions to the right of the URL bar.
Hands on
- Create a short video that uses tracks. Make sure that the file size is small, i.e. use a fairly low resolution and make it short in time.
- A complete simple example is: http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html
- In case you cannot produce or find your own video, you can start playing from here
Start from the following HTML5 and VTT code fragments if you like:
File template.html:
<!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>
file template.vtt
WEBVTT
Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour
Disclaimer
00:01:10.000 --> 00:02:10.000
This is just a track demo using VTT
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)