COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
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 5  ===
=== Week 6 ===


==== Topics Covered ====
==== Topics Covered ====
Line 7: Line 7:
* Strategies for dealing with Video formats (Editing and conversion)
* Strategies for dealing with Video formats (Editing and conversion)
* Video and audio with HTML5
* Video and audio with HTML5
* Using JavaScript (HTML5 Players)
* Creating Screencasts
* Editing Video files


==== Important teaching materials ====
==== Important teaching materials ====
Line 67: Line 68:
==== Wednesday - classroom activities ====
==== Wednesday - classroom activities ====


'''Topic:
* Using HTML5 Players
* Dealing with a [[JavaScript]] library
; Discussion of homework, term project and final
* HW4 feedback (focus on a target audience !)
* [[COAP:COAP-2100/term project|term project]]
; Principles
* Recall of HTML5 video principles
* Track languages: SRT, WebVTT, [[Timed Text]], etc.
* [[WebVTT]] (A video track language)
* Using JavaScript libraries
; LeanBackPlayer exercise
* [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".
* Create the player code with the [http://leanbackplayer.com/generator/ 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:
<source lang="XML">
<!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>
</source>
* 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
<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>
; Optional
* [[Javascript tutorial - basics]]
==== Homework 5 ====
* Create an HTML5 file that includes at least a video and an audio
* 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'': Monday, week 7, before class


==== Homework 6 ====
==== Homework 6 ====

Revision as of 20:26, 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 6

Topics Covered

  • Video/Audio formats and codecs
  • Strategies for dealing with Video formats (Editing and conversion)
  • Video and audio with HTML5
  • Creating Screencasts
  • Editing Video files

Important teaching materials

Classroom activities - Monday

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>HTML 5 video element</title>
  </head>
    <body>
Video (replace the URLS)
      <video id="movie1" controls preload="metadata">
	<source src="videos/state-of-wikipedia-480x272.mp4">
	<source src="videos/state-of-wikipedia-480x272.ogv">
	<source src="videos/state-of-wikipedia-480x272.webm">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </video>
Audio (replace/reduce the URLs)
      <audio id="movie1" autoplay loop>
	<source src="audio/guitar.mp3">
	<source src="audio/guitar.ogg">
	<source src="audio/guitar.m4a">
	<source src="audio/guitar.wav">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </audio>
      <hr/>
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a> 
    </body>
</html>

Wednesday - classroom activities

Homework 6

Notice: Technology of HTML5 players will not be tested in the final exam. If you already submitted four good homeworks, you can skip this one.....

  • Create an HTML5 file that includes at a video shown with an HTML5 Player. You can use LeanbackPlayer or any other.
  • 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 customizing the JS library as much as you can. Read the documentation that is provided on the website of the player.
  • In order to get a high mark with respect to complexity, you must include tracking data.
  • Submit the files to the worldclass room. Make sure to include the media files unless you link to accessible URLs. (We suggest using a zip file).
  • Due: Wednesday, week 7, before class

Term project

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