COAP:COAP-2100/week6: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 6) |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 29: | Line 29: | ||
** [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 ....). | ** [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 ....). | ||
* For finding background sounds, see [[Sound Assets]] | * For finding background sounds, see [[Sound Assets]] | ||
* Create an HTML5 file that includes video and audio | * Create an HTML5 file that includes video and audio | ||
| Line 69: | 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 91: | 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
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