COAP:COAP-2100/week7

Week 7

Topics:

Using HTML5 Players
Creating HTML5 captions with WebVTT
Dealing with a JavaScript library
Creating Screencasts (part II)
Editing Video files (part II)

Discussion of homework, term project and final

term project

Principles

Recall of HTML5 video principles
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 "project5".

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)

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>

Fix the URLs in the code:
- In particular substitute the absolute "http://yourdomain.com/" by "js.player" or css.player.
- Change the name of the video files if needed.
- Change the name of the poster files, i.e. substitute "http://leanbackplayer.com/videos/poster/elephants_dream_640x360.jpg" by "myposter.jpg".

Test: If the video does not show then you likely:
- must have put the library and the CSS 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

See WebVTT
Look at the code of http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
- Code below is taken from this file...

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

Live example: http://tecfa.unige.ch/guides/html/html5-video/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

Javascript tutorial - basics

Homework 7 (to be confirmed)

Create an HTML5 file that includes at a video, an audio and a least a VTT captions files for the video.
The page should be "meaningful" and usable with respect to a target population of your choice. (I.e. don't create a page for the instructor, identify an objective and implement ...)
You may copy/paste text and use media files from some other sources under the condition that you cite these sources.
You may keep the HTML very simple (ie. only use h1 and p tags)
In order to get a high mark with respect to Artwork and appeal, you should consider using some CSS, e.g. add a float:right property to the video element. In case you don't know CSS at all, you may compensate with excellent contents.
Submit the files to the worldclass room. Make sure to include the media files unless you link to accessible URLs.

Due: wednesday , week 8, before class

COAP:COAP-2100/week7

Week 7

Homework 7 (to be confirmed)

Navigation menu

Slow Search