COAP:COAP-2100/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
=== Week 7  ===
=== Week 7  ===


==== Topics Covered ====
==== 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
* 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
* [[COAP:COAP-2100/term project|term project]]
* [[COAP:COAP-2100/exams|exams]]


* Video with Flash
==== Monday ====
** Encoding of Flash videos
** Creating Flash files with the video component
** Adding captions (sub-titles) with [[Timed Text]]
* XML (some principles as explained in the [[Editing XML tutorial]])


==== Teaching materials ====
* Recall of HTML5 video principles (week 6)


* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
* Video editing
<!-- * [[Wiki]] and [[Mediawiki]] (background information and links) -->
** [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] (MovieMake download)
* [[Video streaming]], [[Multimedia container format]], [[Codec]] (some short background info with links)
** [http://windows.microsoft.com/en-us/windows-live/movie-maker#t1=movies Short help] at MS
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
** [http://www.apple.com/mac/imovie/ Imovie] (download/propaganda at Apple)


==== Classroom activities ====
* Screencasting
** Use or download [http://www.screencast-o-matic.com/ ScreenCast-O-Matic]
** See also [[Screencast]] (includes some links)


; Monday
* 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


* Creating Flash videos: [[Flash video component tutorial]]
* HTML5 Captions
** Video formats ([[Multimedia container format]])
** Track languages: SRT, WebVTT, [[Timed Text]], etc.
** http://video.google.com/videoadvancedsearch (Google video search)
** [[WebVTT]] (A video track language)
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
** Using JavaScript libraries
** Video encoding for Flash and Timed Text ([[Flash video component tutorial]], only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


Code template for timed text:
; LeanBackPlayer exercise
<source lang="actionscript">
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head><styling></styling></head>
  <body>
  <div xml:lang="en">
      <p begin="1" dur="4">Let´s start</p>


    </div>
* [http://leanbackplayer.com/ LeanBack Player]
  </body>
* Download from [http://leanbackplayer.com/player_download.html?type=player here] and unzip the library within a folder that you could name "project6".
</tt>
 
</source>
* Create the player code with the [http://leanbackplayer.com/generator/ HTML5 Generator].
Code template for times text (advanced):
** Tick most everything except autoplay and loop
<source lang="actionscript">
** 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.
<?xml version="1.0" encoding="UTF-8"?>
** Keep the browser tab open (you will need to copy/paste the code)
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
 
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
* In the directory you just created, create a new HTML5 file using the template below:
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<source lang="XML">
<!doctype html>
<html>
   <head>
   <head>
     <styling>
     <meta charset="UTF-8"/>  
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    <title>HTML 5 video</title>
     </styling>
 
     <!-- Insert the header code about here and kill this line -->
 
   </head>
   </head>
  <body>
    <body>
   <div xml:lang="en">
 
      <p begin="0" dur="9" style="title">Something</p>
      <h1>Title that you should set </h1>
      <p begin="30" dur="5">My
      <p>Intro that you should change ....</p>
        <span tts:backgroundColor="yellow" tts:color="black">
 
        something</span>
   <!-- Insert the body code about here and kill this line -->
      </p>
 
      <p begin="35" dur="5">
 
        <span tts:backgroundColor="transparent"></span>
      <hr/>
        Working hard ....
      <a href="http://validator.w3.org/">W3C validator</a>
      </p>
    </body>
      <p begin="40" dur="4">The outside (not my bike)</p>
</html>
    </div>
</source>
  </body>
 
</tt>
* 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
<source lang="XML">
<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"/>
</source>
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
 
<source lang="text">
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
</source>
</source>


==== Homework 7 ====
; Optional
* [[Javascript tutorial - basics]]
 
 
 
==== 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)


Create a Flash video with captions
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]


* Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
'''(3) Creating screencasts:'''
* Prepare a flash "movie clip" that includes playback with the video component plus captions.
* http://www.screencast-o-matic.com
* You can choose any film you like, but preferably one that you made yourself (originality bonus)


Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.
'''(4) Video and audio editing (part II)'''


I suggest that those who already turned in 3-4 homeworks skip this exercice. I will not test Flash in the final exam. I only require that you have some very basic understanding of timed text (i.e. use the "p" tag to define start and duration of captions ....)
* [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker]


When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf, flv, js. To get this right, I suggest to use a new folder for this project.
==== Homework 7 ====


Due: Wednesday, week 8
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"