COAP:COAP-2100/week6
Jump to navigation
Jump to search
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
- 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>
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
- 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