COAP:COAP-2100/week7: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (→Week 7) |
||
(11 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
==== Topics ==== | ==== Topics ==== | ||
* Nice HTML5/SVG site: http://middle-earth.thehobbit.com/ (Read [http://www.html5rocks.com/en/tutorials/casestudies/hobbit-front-end/ The Front-end of Middle-earth]) | |||
* Video editing | |||
* Using HTML5 Players | * Using HTML5 Players | ||
* Creating HTML5 captions with WebVTT | * Creating HTML5 captions with WebVTT | ||
* Dealing with a [[JavaScript]] library | * Dealing with a [[JavaScript]] library | ||
* Creating Screencasts | * Creating Screencasts | ||
* | * (Simple) editing video files | ||
; Discussion of homework, term project | ; Discussion of homework, term project, mid term | ||
* Mid-term feedback | |||
* [[COAP:COAP-2100/term project|term project]] | * [[COAP:COAP-2100/term project|term project]] | ||
* [[COAP:COAP-2100/exams|exams]] | |||
==== Monday ==== | ==== Monday ==== | ||
* Recall of HTML5 video principles | * Recall of HTML5 video principles (week 6) | ||
* Track languages: SRT, WebVTT, [[Timed Text]], etc. | |||
* [[WebVTT]] (A video track language) | * Video editing | ||
* Using JavaScript libraries | ** [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] (MovieMake download) | ||
** [http://windows.microsoft.com/en-us/windows-live/movie-maker#t1=movies Short help] at MS | |||
** [http://www.apple.com/mac/imovie/ Imovie] (download/propaganda at Apple) | |||
* Screencasting | |||
** Use or download [http://www.screencast-o-matic.com/ ScreenCast-O-Matic] | |||
** See also [[Screencast]] (includes some links) | |||
* Video and audio converters | |||
** [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats. | |||
** [http://www.onlinevideoconverter.com/ OnlineVideoConverter.com]. Online converter. Heavy adds. | |||
** Install [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files | |||
* HTML5 Captions | |||
** Track languages: SRT, WebVTT, [[Timed Text]], etc. | |||
** [[WebVTT]] (A video track language) | |||
** Using JavaScript libraries | |||
; LeanBackPlayer exercise | ; LeanBackPlayer exercise | ||
* [http://leanbackplayer.com/ LeanBack Player] | * [http://leanbackplayer.com/ LeanBack Player] | ||
* Download from [http://leanbackplayer.com/player_download.html?type=player here] and unzip the library within a folder that you could name " | * Download from [http://leanbackplayer.com/player_download.html?type=player here] and unzip the library within a folder that you could name "project6". | ||
* Create the player code with the [http://leanbackplayer.com/generator/ HTML5 Generator]. | * Create the player code with the [http://leanbackplayer.com/generator/ HTML5 Generator]. | ||
Line 30: | Line 51: | ||
** Keep the browser tab open (you will need to copy/paste the code) | ** 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: | ||
<source lang="XML"> | <source lang="XML"> | ||
<!doctype html> | <!doctype html> | ||
Line 56: | Line 77: | ||
* Fix the URLs in the code: | * Fix the URLs in the code: | ||
** | ** Reaplce the abolute "http://yourdomain.com/..." URL by "js.player" and css.player. '''Look at the code and think !'''. | ||
** Change the name of the video files if needed. | ** 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". | ** 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: | * Test: If the video does ''not'' show then you likely: | ||
** must have put the | ** 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 deleted some important line of code | ||
** must have have syntax errors: validate your code | ** must have have syntax errors: validate your code | ||
Line 69: | Line 90: | ||
* See [[WebVTT]] | * See [[WebVTT]] | ||
* Look at the code of http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html | * 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 | ** Code below is taken from this file and should be inserted right after the source elements | ||
Track elements | Track elements | ||
Line 99: | Line 120: | ||
; Optional | ; Optional | ||
* [[Javascript tutorial - basics]] | * [[Javascript tutorial - basics]] | ||
==== Wednesday ==== | ==== Wednesday ==== | ||
'''1) Exam/term project Q/A''' | |||
Video and audio editing (part II) | '''(2) WebVTT hands-on''' | ||
* Get the HTML file done on Monday and add captions files, look at [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html this example] | |||
* You can start from this VTT file: [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (rename it if necessary) | |||
If you missed class: | |||
* Download and dezip [http://leanbackplayer.com/player_download.html?type=player LeanBack Player] | |||
* Save the following file and start from there: [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html] | |||
'''(3) Creating screencasts:''' | |||
* http://www.screencast-o-matic.com | |||
'''(4) Video and audio editing (part II)''' | |||
* [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] | * [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] | ||
Line 111: | Line 144: | ||
==== Homework 7 ==== | ==== Homework 7 ==== | ||
None, but see homework 6 announced in [[COAP:COAP-2100/week6|week 6]] | |||
[[Category: COAP 2100]] | [[Category: COAP 2100]] |
Latest revision as of 21:43, 25 February 2014
Week 7
Topics
- Nice HTML5/SVG site: http://middle-earth.thehobbit.com/ (Read The Front-end of Middle-earth)
- Video editing
- Using HTML5 Players
- Creating HTML5 captions with WebVTT
- Dealing with a JavaScript library
- Creating Screencasts
- (Simple) editing video files
- Discussion of homework, term project, mid term
- Mid-term feedback
- term project
- exams
Monday
- Recall of HTML5 video principles (week 6)
- Video editing
- Windows Movie Maker (MovieMake download)
- Short help at MS
- Imovie (download/propaganda at Apple)
- Screencasting
- Use or download ScreenCast-O-Matic
- See also Screencast (includes some links)
- Video and audio converters
- Online-convert.com Online converter service for various file formats.
- OnlineVideoConverter.com. Online converter. Heavy adds.
- Install FireOgg, a Firefox plugin for creating ogg and webm video files
- 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>
- Fix the URLs in the code:
- Reaplce the abolute "http://yourdomain.com/..." URL by "js.player" and css.player. Look at the code and think !.
- 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 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
- 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 and should be inserted right after the source elements
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:
- Download and dezip LeanBack Player
- Save the following file and start from there: html5-video-track-leanbackplayer.html
(3) Creating screencasts:
(4) Video and audio editing (part II)
Homework 7
None, but see homework 6 announced in week 6