COAP:COAP-2100/week6: Difference between revisions

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


==== Topics Covered ====
==== Topics Covered ====


* SVG wrapup (see week 5 program)
* Video/Audio formats and codecs
* Video/Audio formats and codecs
* 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 (very short demo)
* Editing Video files (very short demo)


==== Important teaching materials ====
==== Teaching materials ====


* [[HTML5 audio and video]] ('''mandatory reading''' or find an equivalent)
* [[HTML5 audio and video]] ('''mandatory reading''' or find an equivalent)
* [http://en.wikipedia.org/wiki/Digital_container_format Digital container format] (Wikipedia) and [http://en.wikipedia.org/wiki/Comparison_of_container_formats Comparison of container formats] (Wikipedia). Will show you that lots of codecs are supported by some of these containers.
* [http://en.wikipedia.org/wiki/Digital_container_format Digital container format] (Wikipedia) and [http://en.wikipedia.org/wiki/Comparison_of_container_formats Comparison of container formats] (Wikipedia). Will show you that lots of codecs are supported by some of these containers.
* [[Video streaming]], [[Multimedia container format]], [[Codec]], [[Video editing]] (some short background info with links)
* [[Video streaming]], [[Multimedia container format]], [[Codec]], [[Video editing]] (some short background info with links)
* [[WebVTT]]
* [http://en.wikipedia.org/wiki/Screencasting Screencasting] (Wikipedia) and [[Screencast]] (links to some tools and other resources)
* [[Flash video component tutorial]] ''if time left'', only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


==== Classroom activities - Monday ====
==== Classroom activities - Monday ====


* Using Videos in HTML5 overview
* Using video and audio in HTML5 overview
** Tutorial: [[HTML5 audio and video]]
** Tutorial: [[HTML5 audio and video]]
** Video formats (You can find links in [[Multimedia container format]])
** Video formats (You can find links in [[Multimedia container format]])
** Video software (you can find links in [[Video editing and conversion]]
** Video software (you can find links in [[Video editing and conversion]]
* Video download
* Video downloads:
** [https://vimeo.com/ Vimeo] Best quality video repository. For download, you will have to register.
** [https://vimeo.com/ Vimeo] Best quality video repository. For download, you will have to register. Search for open contents.
** http://video.google.com/videoadvancedsearch (Google video search)
** http://video.google.com/videoadvancedsearch (Google video search)
** [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension. Allows to download from sites like YouTube.
** [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension. Allows to download videos from sites like YouTube (however you then run into copyright problems ....).
* Using audio in HTML5 overview
* For finding background sounds, see [[Sound Assets]]
** For finding background sounds, see [[Sound Assets]]
 
* Video and audio converters
** [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats.
** [http://www.mediaconverter.org/ MediaConverter.org] Online converter. Also can download from websites.
** [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
* Create an HTML5 file that includes video and audio
* Create an HTML5 file that includes video and audio
** Start from http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html and http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-simple.html or copy/paste code from below
** Start from http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html and http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-simple.html or copy/paste code from below
Line 65: Line 61:
</source>
</source>


; Wednesday (to be confirmed)
Example 2
 
<source lang="html5">
* Using HTML5 Players
 
==== Classroom activities - Wednesday ====
 
; Discussion of term project and final
* [[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>
<!doctype html>
<html>
<html>
   <head>
   <head>
     <meta charset="UTF-8"/>  
     <meta charset="UTF-8"/>  
     <title>HTML 5 video</title>
     <title>HTML 5 video element</title>
  </head>
    <body>
 
      <h1>The HTML5 video element with style</h1>
 
      <video id="movie1" controls preload="metadata"
            style=" float:right;
                    margin: 0px 10px 0px 10px;
                    border-style: solid;
                    border-width: 50px 50px 50px 50px;
                    border-image: url(bricks.jpg) 50 round;
                    -webkit-border-image: url(bricks.jpg) 50 round;
                    -moz-border-image: url(bricks.jpg) 50 round;
                    ">
<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>


    <!-- Insert the header code about here and kill this line -->
      <p>This is an example file for an HTML5 Video tutorial: <a href="http://edutechwiki.unige.ch/en/HTML5_audio_and_video">http://edutechwiki.unige.ch/en/HTML5_audio_and_video</a></p>


  </head>
      <p>Border texture was taken from <a href="http://www.aztextures.com/view//bricks_aztextures_8080175-other.html">AZtextures.com</a>, a nice repository of free textures.</p>
    <body>


      <h1>Title that you should set </h1>
       <p>Look at the source if you don't want to read the EduTechWiki article ...</p>
       <p>Intro that you should change ....</p>


  <!-- Insert the body code about here and kill this line -->




       <hr/>
       <hr/>
       <a href="http://validator.w3.org/">W3C validator</a>  
       <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>  
     </body>
     </body>
</html>
</html>
</source>
</source>


* Fix the URLs in the code:
==== Wednesday - classroom activities ====
** In particular substitute the absolute "http://yourdomain.com/" by "".
** 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 show then you likely:
* [[COAP:COAP-2100/term project|term project]] Q/R
** Put the library in some other place (not the same directory). Fix the URLs
* Exam
** Deleted some important Line of code
** Have syntax errors. Validate your code
 
* Add tracking data
** See [[WebVTT]]
** Look at the code of http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
 
==== 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 ====


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 least'''
# a video in two different container variants (webm, ogg, mp4)
# an audio (mp3)
# and at least one VTT captions file for the video.


* 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. do not create a page for the instructor, identify an objective and a target population and implement for these ...)
* 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 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)  
* You may keep the HTML very simple (i.e. only use h1, div and p tags), but you should try to produce a good user experience. (usability, usefulness and graphic appeal)
* 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).
* 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).
* You may '''not''' submit the screencast for the term project as project 6


* ''Due'': Wednesday, week 7, before class
* ''Due'': Monday, week 8, before class
 
==== Term project ====
 
* See [[COAP:COAP-2100/term project|term project]]


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

Latest revision as of 17:21, 20 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

  • SVG wrapup (see week 5 program)
  • Video/Audio formats and codecs
  • Strategies for dealing with Video formats (Editing and conversion)
  • Video and audio with HTML5
  • Creating Screencasts (very short demo)
  • Editing Video files (very short demo)

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>

Example 2 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>HTML 5 video element</title>
  </head>
    <body>

      <h1>The HTML5 video element with style</h1>

      <video id="movie1" controls preload="metadata" 
             style=" float:right;
                     margin: 0px 10px 0px 10px;
                     border-style: solid;
                     border-width: 50px 50px 50px 50px;
                     border-image: url(bricks.jpg) 50 round;
                     -webkit-border-image: url(bricks.jpg) 50 round;
                     -moz-border-image: url(bricks.jpg) 50 round;
                    ">
	<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>

      <p>This is an example file for an HTML5 Video tutorial: <a href="http://edutechwiki.unige.ch/en/HTML5_audio_and_video">http://edutechwiki.unige.ch/en/HTML5_audio_and_video</a></p>

      <p>Border texture was taken from <a href="http://www.aztextures.com/view//bricks_aztextures_8080175-other.html">AZtextures.com</a>, a nice repository of free textures.</p>

      <p>Look at the source if you don't want to read the EduTechWiki article ...</p>



      <hr/>
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a> 
    </body>
</html>

Wednesday - classroom activities

Homework 6

Create an HTML5 file that includes at least

  1. a video in two different container variants (webm, ogg, mp4)
  2. an audio (mp3)
  3. and at least one VTT captions file for the video.
  • The page should be "meaningful" and usable with respect to a target population of your choice. (I.e. do not create a page for the instructor, identify an objective and a target population and implement for these ...)
  • 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 (i.e. only use h1, div and p tags), but you should try to produce a good user experience. (usability, usefulness and graphic appeal)
  • 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).
  • You may not submit the screencast for the term project as project 6
  • Due: Monday, week 8, before class
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week6&oldid=51244"