COAP:COAP-2100/week6: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 6) |
m (→Homework 6) |
||
| Line 91: | Line 91: | ||
* 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]] | ||
Revision as of 21:31, 16 February 2014
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
- HTML5 audio and video (mandatory reading or find an equivalent)
- Digital container format (Wikipedia) and 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)
- Screencasting (Wikipedia) and Screencast (links to some tools and other resources)
Classroom activities - Monday
- Using video and audio in HTML5 overview
- Tutorial: HTML5 audio and video
- Video formats (You can find links in Multimedia container format)
- Video software (you can find links in Video editing and conversion
- Video downloads:
- Vimeo Best quality video repository. For download, you will have to register. Search for open contents.
- http://video.google.com/videoadvancedsearch (Google video search)
- Video downloadhelper, Firefox extension. Allows to download videos from sites like YouTube (however you then run into copyright problems ....).
- For finding background sounds, see Sound Assets
- Video editing
- Windows Movie Maker (MovieMake download)
- Short help at MS
- Imovie (download/propaganda at Apple)
- Screencasting
- Use or download ScreenCast-O-Matic
- See also Screencast (includes some links)
- Video and audio converters
- Online-convert.com Online converter service for various file formats.
- OnlineVideoConverter.com. Online converter. Heavy adds.
- Install FireOgg, a Firefox plugin for creating ogg and webm video files
- 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
<!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
- term project Q/R
- Exam
Homework 6
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.
- 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