COAP:COAP-2100/week7: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
Line 3: | Line 3: | ||
=== Week 7 === | === Week 7 === | ||
''' | '''Topics: ''' | ||
* Using HTML5 Players | * Using HTML5 Players | ||
* Creating HTML5 captions with WebVTT | |||
* Dealing with a [[JavaScript]] library | * Dealing with a [[JavaScript]] library | ||
* Creating Screencasts (part II) | |||
* Editing Video files (part II) | |||
; Discussion of homework, term project and final | ; Discussion of homework, term project and final |
Revision as of 20:28, 16 February 2014
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
- 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
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
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