COAP:COAP-3000/week2: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(7 intermediate revisions by the same user not shown)
Line 77: Line 77:
* A complete simple example:
* A complete simple example:
** http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html  (look at the source code)
** http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html  (look at the source code)
** http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt  (simple VTT file)
** http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt  (simple <code>*.vtt</code> file)
* In case you cannot produce or find your own video, you can start playing from [http://tecfa.unige.ch/guides/html/html5-video/videos/ here]. It is preferable to shoot a short video with your smartphone or create a screen cast for software application, e.g. a video game.
* In case you cannot produce or find your own video, you can start playing from [http://tecfa.unige.ch/guides/html/html5-video/videos/ here]. It is preferable to shoot a short video with your smartphone or create a screen cast for software application, e.g. a video game.


Line 99: Line 99:
<source src=".... .mp4"/>
<source src=".... .mp4"/>
<source src=".... .webm"/>
<source src=".... .webm"/>
<track kind="subtitles" label="EN subtitles" src="....vtt" srclang="en" default/>
<track kind="subtitles" label="EN subtitles" src="*.vtt" srclang="en" default/>
       </video>
       </video>


Line 129: Line 129:
* [[HTML5 video and JavaScript]]
* [[HTML5 video and JavaScript]]


=== A first look at DOM progamming ===
=== A first look at Dynamic HTML and DOM programming ===
 
Reminder:
* Each element in an HTML page that has a (unique) <code>id="..."</code> attribute can be easily manipulated with JavaScript.
 
HTML Example:
<source lang="html5">
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Basic DHTML</title>
</head>
 
<body>
  <p id="pText">Welcome to our Web page!</p>
<p>
  <input value="Change style" type="button" id="but1">
  <input value="Change text" type="button" id="but2"></p>
    <script  src="js/index.js"></script>
</body>
</html>
</source>
 
JavaScript file js/index.js:
<source lang="javascript">
document.getElementById("but1").onclick = changeText;
document.getElementById("but2").onclick = start;
 
function changeText() {
  console.log("hello");
  var p = document.getElementById("pText");
  p.style.color = "blue";
  p.style.fontSize = "18pt";
}
 
function start() {
  var p = document.getElementById("pText");
  alert("Page contents : " + p.innerHTML);
  p.innerHTML = "Do you really think we care that you came ?";
  alert("Page contents changed to : " + p.innerHTML);
  p.innerHTML = "Cool, isn't it ?";
}
</source>
 
* You can play with this example [https://codepen.io/danielkschneider/pen/RMxreQ here]


=== Hands on ===
=== Hands on ===


Let's add some JavaScript to manipulate the video you started working on.
Let's add some JavaScript to manipulate the video you started working on.
* Create a big button that will stop the video.
* Create a big button that will stop the video and another one that will restart the video
 
Look at the code here:
* https://codepen.io/danielkschneider/pen/dmJYwY
* Then adapt your HTML
* Grab the JavaScript code and create a file that is linked from your HTML.
 
Alternatively, grab it from below:
<source lang="HTML5">
<!-- Video -->
<video id="myVideo">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<hr>
<!-- Boutons -->
<button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> <button id="stopBtn">Stop</button>
</source>
 
<source lang="JavaScript">
//Identify HTML elements
var myVideo = document.getElementById("myVideo");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var stopBtn = document.getElementById("stopBtn");
//Start playing the video
playBtn.onclick = function () {
  myVideo.play();
}
//Pause
pauseBtn.onclick = function () {
  myVideo.pause();
}
//Since the stop function does not exist, we combine pause with currentTime = 0;
stopBtn.onclick = function () {
  myVideo.pause();
  myVideo.currentTime = 0;
}
</source>


== Homework/project 2 ==
== Homework/project 2 ==
Line 145: Line 232:
* The HTML page should include all elements required to understand what the video will be about and where it comes from.
* The HTML page should include all elements required to understand what the video will be about and where it comes from.
* The video must include at least four captions (subtitles) defined in a VTT file
* The video must include at least four captions (subtitles) defined in a VTT file
* The page must include JavaScript code to manipulate the video. You must manage at least two events.
* The page must include JavaScript code to manipulate the video. You must manage at least two events, for example, a user clicking a button.
* You can freely choose a topic and reuse prior work.  
* You can freely choose a topic and reuse prior work.  
* Video container format must be either *.mp4, *.webm or *.ogv (no other formats !!)
* Video container format must be either *.mp4, *.webm or *.ogv (no other formats !!)
'''A useful, usable and attractive page''' will get a better grade. "Useful" means that a defined target population will likely appreciate this page. "Usable" means that a typical user will figure out how to use the page and its controls. "Attractive" means that a typical user likes the visual aspects.


'''(2) Create a report as screen cast''' (Alternatively write a written report of 400 to 500 words plus screen captures)
'''(2) Create a report as screen cast''' (Alternatively write a written report of 400 to 500 words plus screen captures)

Latest revision as of 09:20, 28 March 2018

COAP:COAP-3000
◀▬▬▶
⚐ ☸
⚒ 2018/03/28
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.

Adobe CC installation (for later use)

To run the CC applications you need to

  1. Launch the "adobe Creative Cloud Packager" tool
  2. Click on Creative Cloud Desktop apps for education (be careful with this one, if you select entreprise you will end in an infinite loop)
  3. enter as a username your webster EDU email address (xxx@webster.edu)
  4. wait for the redirect and enter again the e-mail address + the connections password
  5. Once this is done, you can launch the CC apps

Monday

Presentation of HTML5 video technology and demo

Video convertors and editors

In the lab (classroom), use VLC. This is free software and you can install it on your own computer.

For this class, an online converter and trimmer can do: Try Cloud convert. However, be prepared to wait. TechRadar has a larger list.

Browser extensions

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 advertisements 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. However, most useful extensions did disappear after version 56 (in 2017) and the browser did become less than half as useful as it used to be. You will find the extensions to the right of the URL bar.

Firefox Media converter and Muxer

Online tools

Video converter for Windows

We suggest using the VLC video player:

  • Menu Media -> Convert/save (or hit CTRL-R)
  • Enter a source file (browse)
  • At the bottom, Click Convert/save.
  • Select a profile, e.g. MP4 or Webm. The tool icon (next to the pull down menu) allows to specify details.
    • To scale down, open to toolbox, select Video Codec TAB, select Resolution TAB, Set Scale. Then Save
  • Select a destination file.
  • Click Start .... and wait

Other options you can try out on your own PC:

Video editors for Windows and Mac

  • See Video editing and conversion, e.g. OpenShot and ShotCut. Both are multi-platform and require some learning. Some folks are happy with Avidemux.
  • On older Windows systems, use Windows Movie Maker. Unfortunately Microsoft does no longer provide a Video Editor with Windows 10.
  • On a Mac, use IMovie

Hands on

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

Wiki pages used:

A first look at Dynamic HTML and DOM programming

Reminder:

  • Each element in an HTML page that has a (unique) id="..." attribute can be easily manipulated with JavaScript.

HTML Example: 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Basic DHTML</title>
 </head>

<body>
  <p id="pText">Welcome to our Web page!</p>
<p>
  <input value="Change style" type="button" id="but1">
  <input value="Change text" type="button" id="but2"></p>
    <script  src="js/index.js"></script>
</body>
</html>

JavaScript file js/index.js: 

document.getElementById("but1").onclick = changeText;
document.getElementById("but2").onclick = start;

function changeText() {
  console.log("hello");
  var p = document.getElementById("pText");
  p.style.color = "blue";
  p.style.fontSize = "18pt";
}

function start() {
  var p = document.getElementById("pText");
  alert("Page contents : " + p.innerHTML);
  p.innerHTML = "Do you really think we care that you came ?";
  alert("Page contents changed to : " + p.innerHTML);
  p.innerHTML = "Cool, isn't it ?";
}
  • You can play with this example here

Hands on

Let's add some JavaScript to manipulate the video you started working on.

  • Create a big button that will stop the video and another one that will restart the video

Look at the code here:

Alternatively, grab it from below: 

<!-- Video -->
<video id="myVideo">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<hr>
<!-- Boutons -->
<button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> <button id="stopBtn">Stop</button>

//Identify HTML elements
var myVideo = document.getElementById("myVideo");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var stopBtn = document.getElementById("stopBtn");
 
//Start playing the video
playBtn.onclick = function () {
  myVideo.play();
}
 
//Pause
pauseBtn.onclick = function () {
  myVideo.pause();
}
 
//Since the stop function does not exist, we combine pause with currentTime = 0;
stopBtn.onclick = function () {
  myVideo.pause();
  myVideo.currentTime = 0;
}

Homework/project 2

Project #2 will allow you to consolidate your HTML5 video skills, i.e. work started in the classroom.

Task

(1) Create an HTML page that includes a short HTML5 video, using the video, source and track elements

  • The HTML page should include all elements required to understand what the video will be about and where it comes from.
  • The video must include at least four captions (subtitles) defined in a VTT file
  • The page must include JavaScript code to manipulate the video. You must manage at least two events, for example, a user clicking a button.
  • You can freely choose a topic and reuse prior work.
  • Video container format must be either *.mp4, *.webm or *.ogv (no other formats !!)

A useful, usable and attractive page will get a better grade. "Useful" means that a defined target population will likely appreciate this page. "Usable" means that a typical user will figure out how to use the page and its controls. "Attractive" means that a typical user likes the visual aspects.

(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 HTML page together with the vido make an interesting "point" ?
  • Technical elements: Correct use of tracks, subtitles and JavaScript (code works)
  • Original work.
  • Quality of the visual design: Is the page visually appealing ?
  • Report: Does the report state the objectives, shortly present the design, include an auto-evaluation
  • In time: Was the project turned in before wed, week 3, 9h ?

Resources

Introductions to HTML5 video

  • HTML for Masterminds, Chapter 6
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3000/week2&oldid=67336"