COAP:COAP-2100/week6
Jump to navigation
Jump to search
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
- 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)
Classroom activities - Monday
- Using Videos 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 download
- Vimeo Best quality video repository. For download, you will have to register.
- http://video.google.com/videoadvancedsearch (Google video search)
- Video downloadhelper, Firefox extension. Allows to download from sites like YouTube.
- Using audio in HTML5 overview
- For finding background sounds, see Sound Assets
- 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,
- an audio
- 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