COAP:COAP-2100/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(13 intermediate revisions by the same user not shown)
Line 3: Line 3:
=== Week 7  ===
=== Week 7  ===


'''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 (part II)
* Creating Screencasts  
* Editing Video files (part II)
* (Simple) editing video files


; Discussion of homework, term project and final
; 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 ====
* Recall of HTML5 video principles (week 6)


; Principles
* Video editing
* Recall of HTML5 video principles
** [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] (MovieMake download)
* Track languages: SRT, WebVTT, [[Timed Text]], etc.
** [http://windows.microsoft.com/en-us/windows-live/movie-maker#t1=movies Short help] at MS
* [[WebVTT]] (A video track language)
** [http://www.apple.com/mac/imovie/ Imovie] (download/propaganda at Apple)
* Using JavaScript libraries
 
* 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 "project5".
* 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 29: 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)


* Create a new HTML5 file using the template below:
* 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 55: Line 77:


* Fix the URLs in the code:
* Fix the URLs in the code:
** In particular substitute the absolute "http://yourdomain.com/" by "js.player" or css.player.
** 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 library and the CSS in some other place (not the same directory). Fix the URLs, '''look''' at your directory !
** 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 68: 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 121:
* [[Javascript tutorial - basics]]
* [[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
==== Wednesday ====
 
'''1) Exam/term project Q/A'''
 
'''(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]
 
==== 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

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

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

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week7&oldid=51705"