COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(7 intermediate revisions by the same user not shown)
Line 11: Line 11:
* Editing Video files (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)
* [http://en.wikipedia.org/wiki/Screencasting Screencasting] (Wikipedia) and [[Screencast]] (links to some tools and other resources)


==== 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.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 58: Line 55:
         Your browser doesn't support HTML5. Maybe you should upgrade.
         Your browser doesn't support HTML5. Maybe you should upgrade.
       </audio>
       </audio>
      <hr/>
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>
    </body>
</html>
</source>
Example 2
<source lang="html5">
<!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/>
       <hr/>
       <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>  
       <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>  
Line 72: Line 110:


'''Create an HTML5 file that includes at least'''
'''Create an HTML5 file that includes at least'''
# a video,
# a video in two different container variants (webm, ogg, mp4)
# an audio
# an audio (mp3)
# and at least a VTT captions files for the video.
# 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 ...)
* 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 ...)
Line 80: Line 118:
* 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)
* 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).
* 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
* ''Due'': Monday, week 8, before class


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

Latest revision as of 16: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"