COAP:COAP-2100/week6: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 5) |
|||
| Line 114: | Line 114: | ||
==== Homework 5 ==== | ==== Homework 5 ==== | ||
Create an HTML5 file that includes at least a video and an audio | * Create an HTML5 file that includes at least a video and an audio | ||
* | * The page should be "meaningful" and usable with respect to a target population of your choice. (I.e. don't create a page for the instructor, identify an objective and implement ...) | ||
* 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 (ie. only use h1 and p tags) | |||
* In order to get a high mark with respect to ''Artwork and appeal'', you should consider using some CSS, e.g. add a float:right property to the video element. In case you don't know CSS at all, you may compensate with excellent contents. | |||
* Submit the files to the worldclass room. Make sure to include the media files unless you link to accessible URLs. | |||
* ''Due'': Moday, week 7, before class | |||
==== Term project ==== | |||
* See [[COAP:COAP-2100/term project|term project]] | |||
[[Category:COAP 2100]] | [[Category:COAP 2100]] | ||
Revision as of 13:01, 23 April 2012
Week 5
Topics Covered
- Video/Audio formats and codecs
- Strategies for dealing with Video formats (Editing and conversion)
- Video and audio with HTML5
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)
- Flash video component tutorial (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
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.
- MediaConverter.org Online converter. Also can download from websites.
- 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 (to be confirmed)
- Creating Flash videos or using HTML5 players
- Video encoding for Flash and Timed Text (Flash video component tutorial, only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
Code template for timed text:
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head><styling></styling></head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Let´s start</p>
</div>
</body>
</tt>
Code template for times text (advanced):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="0" dur="9" style="title">Something</p>
<p begin="30" dur="5">My
<span tts:backgroundColor="yellow" tts:color="black">
something</span>
</p>
<p begin="35" dur="5">
<span tts:backgroundColor="transparent"></span>
Working hard ....
</p>
<p begin="40" dur="4">The outside (not my bike)</p>
</div>
</body>
</tt>
Homework 5
- Create an HTML5 file that includes at least a video and an audio
- The page should be "meaningful" and usable with respect to a target population of your choice. (I.e. don't create a page for the instructor, identify an objective and implement ...)
- 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 (ie. only use h1 and p tags)
- In order to get a high mark with respect to Artwork and appeal, you should consider using some CSS, e.g. add a float:right property to the video element. In case you don't know CSS at all, you may compensate with excellent contents.
- Submit the files to the worldclass room. Make sure to include the media files unless you link to accessible URLs.
- Due: Moday, week 7, before class
Term project
- See term project