COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 19: Line 19:
==== 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 editing
** [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] (MovieMake download)
** [http://windows.microsoft.com/en-us/windows-live/movie-maker#t1=movies Short help at MS)]
** [http://www.apple.com/mac/imovie/ Imovie] (download/propaganda at Apple)
 
* Video and audio converters
* Video and audio converters
** [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats.
** [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.
** [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
** 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

Revision as of 21:00, 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

  • 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)

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

Create an HTML5 file that includes at least

  1. a video,
  2. an audio
  3. and at 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. 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).
  • Due: Monday, week 8, before class
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week6&oldid=51022"