COAP:COAP-2100/week7

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Week 7

Topics

Discussion of homework, term project, mid term

Monday

  • Recall of HTML5 video principles (week 6)
  • HTML5 Captions
    • Track languages: SRT, WebVTT, Timed Text, etc.
    • WebVTT (A video track language)
    • Using JavaScript libraries
LeanBackPlayer exercise
  • LeanBack Player
  • Download from here and unzip the library within a folder that you could name "project6".
  • Create the player code with the HTML5 Generator.
    • Tick most everything except autoplay and loop
    • You already can substitute the video file names (but you also can do that later). We suggest doing it now, e.g. use myvideo.mp4, myvideo.webm, etc.
    • Keep the browser tab open (you will need to copy/paste the code)
  • In the directory you just created, create a new HTML5 file using the template below:
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>HTML 5 video</title>

    <!-- Insert the header code about here and kill this line -->

  </head>
    <body>

      <h1>Title that you should set </h1>
      <p>Intro that you should change ....</p>

   <!-- Insert the body code about here and kill this line -->


      <hr/>
      <a href="http://validator.w3.org/">W3C validator</a> 
    </body>
</html>
  • Test: If the video does not show then you likely:
    • must have put the JS and CSS libraries in some other place (not the same directory). Fix the URLs, look at your directory !
    • must have deleted some important line of code
    • must have have syntax errors: validate your code
    • Tip: Open the error console in your browser: In Firefox: Tools->Web Developer->Error console
Using track with LeanbackPlayer

Track elements

	<track enabled="true" kind="subtitles" label="EN"
	       src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
	<track enabled="true" kind="subtitles" label="EN VTT"
	       src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
	<track enabled="true" kind="subtitles" label="FR" 
	       src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>

WebVTT template to copy/paste into a file called something like subtitles_en.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
Optional


Wednesday

1) Exam/term project Q/A

(2) WebVTT hands-on

  • Get the HTML file done on Monday and add captions files, look at this example
  • You can start from this VTT file: subtitles_en.vtt (rename it if necessary)

If you missed class:

(3) Creating screencasts:

(4) Video and audio editing (part II)

Homework 7

None, but see homework 6 announced in week 6