COAP:COAP-3000/week2: Difference between revisions

Revision as of 18:57, 25 March 2018

COAP:COAP-3000
◀▬▬▶
⚐	☸
⚒ 2018/03/25
Objectives
create an HTML5 video add subtitles add simple interactivity

Objectives

create an HTML5 video
add subtitles
add simple interactivity

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:
- HTML5 audio and video
- WebVTT
Understanding the HTML5 video element
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)

~~https://addons.mozilla.org/en-US/firefox/addon/video-converter-addon/~~ (not really a convertor, it uploads to a web site, not reliable)

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)

Adding captions and subtitles to HTML5 video - App Center | MDN

@@ Line 29: / Line 29: @@
 Firefox convertor extension (open with Firefox)
-* https://addons.mozilla.org/en-US/firefox/addon/video-converter-addon/
+* <del>https://addons.mozilla.org/en-US/firefox/addon/video-converter-addon/ </del>(not really a convertor, it uploads to a web site, not reliable)
 Firefox - Video editor OpenShot online