COAP:COAP-2100/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
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 ====
'''Topic: '''
* Using HTML5 Players
* Dealing with a [[JavaScript]] library
 
; Discussion of homework, term project and final
* [[COAP:COAP-2100/term project|term project]]


* Video with Flash
; Principles
** Encoding of Flash videos
* Recall of HTML5 video principles
** Creating Flash files with the video component
* Track languages: SRT, WebVTT, [[Timed Text]], etc.
** Adding captions (sub-titles) with [[Timed Text]]
* [[WebVTT]] (A video track language)
* XML (some principles as explained in the [[Editing XML tutorial]])
* Using JavaScript libraries


==== Classroom activities ====
; LeanBackPlayer exercise


; Monday
* [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".


* Creating Flash videos: [[Flash video component tutorial]]
* Create the player code with the [http://leanbackplayer.com/generator/ HTML5 Generator].
** Video formats ([[Multimedia container format]])
** Tick most everything except autoplay and loop
** http://video.google.com/videoadvancedsearch (Google video search)
** 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.
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
** Keep the browser tab open (you will need to copy/paste the code)


; Teaching materials for Monday and Wednesday
* Create a new HTML5 file using the template below:
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", in particular:
<source lang="XML">
** [[Flash_video_component_tutorial#Using_the_video_with_the_component_first_method|Using the video with the component first method]]
<!doctype html>
** [[Flash_video_component_tutorial#Making_use_of_captions|Making use of captions]]
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>HTML 5 video</title>


=== Wednesday ===
    <!-- Insert the header code about here and kill this line -->


* Timed text
  </head>
* Using the Flash FLVPlayback Captioning component
    <body>


Code template for timed text:
      <h1>Title that you should set </h1>
<source lang="actionscript">
      <p>Intro that you should change ....</p>
<?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>
  <!-- Insert the body code about here and kill this line -->
  </body>
 
</tt>
 
      <hr/>
      <a href="http://validator.w3.org/">W3C validator</a>  
    </body>
</html>
</source>
</source>
Code template for times text (advanced):
 
<source lang="actionscript">
* Fix the URLs in the code:
<?xml version="1.0" encoding="UTF-8"?>
** In particular substitute the absolute "http://yourdomain.com/" by "js.player" or css.player.
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
** Change the name of the video files if needed.
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
** Change the name of the poster files, i.e. substitute "http://leanbackplayer.com/videos/poster/elephants_dream_640x360.jpg" by "myposter.jpg".
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
 
  <head>
* Test: If the video does ''not'' show then you likely:
    <styling>
** must have put the library and the CSS in some other place (not the same directory). Fix the URLs, '''look''' at your directory !
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
** must have deleted some important line of code
    </styling>
** must have have syntax errors: validate your code
  </head>
** Tip: Open the error console in your browser: In Firefox: Tools->Web Developer->Error console
  <body>
 
  <div xml:lang="en">
; Using track with LeanbackPlayer
      <p begin="0" dur="9" style="title">Something</p>
* See [[WebVTT]]
      <p begin="30" dur="5">My
* Look at the code of http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
        <span tts:backgroundColor="yellow" tts:color="black">
** Code below is taken from this file...
        something</span>
 
      </p>
Track elements
      <p begin="35" dur="5">
<source lang="XML">
        <span tts:backgroundColor="transparent"></span>
<track enabled="true" kind="subtitles" label="EN"
        Working hard ....
      src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
      </p>
<track enabled="true" kind="subtitles" label="EN VTT"
      <p begin="40" dur="4">The outside (not my bike)</p>
      src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
    </div>
<track enabled="true" kind="subtitles" label="FR"  
  </body>
      src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
</tt>
</source>
</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


==== Homework 7 ====
<source lang="text">
WEBVTT


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


* Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end from the film and select an appropriate output format, e.g. *.flv or *.fl4)
Disclaimer
* Prepare a flash "movie clip" that includes playback with the video component plus the captions component.
00:01:10.000 --> 00:02:10.000
* You can choose any film you like, but preferably one that you made yourself (originality bonus)
This is just a track demo using VTT
</source>


Bonus points: Extra elements in the generated HTML page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.
; Optional
* [[Javascript tutorial - basics]]


I suggest that those who already turned in 5 homework could skip this exercise. I will not test Flash in the final exam. I only require that you have some basic understanding of timed text (i.e. be able to use the "p" tag for defining start and duration of captions ....)
==== Homework 7 (to be confirmed) ====


When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf's, flv, and js. To get this right, I suggest to use a new folder for this project, then zip the folder and turn in the folder.
* 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
* ''Due'': wednesday , week 8, before class


[[Category: COAP 2100]]
[[Category: COAP 2100]]

Revision as of 20:25, 16 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

Topic:

  • Using HTML5 Players
  • Dealing with a JavaScript library
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>
  • 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

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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week7&oldid=51012"