COAP:COAP-2100/week6: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 5) |
|||
| Line 20: | Line 20: | ||
; Monday | ; Monday | ||
* Using Videos in HTML5 overview | * Using Videos in HTML5 overview and video download | ||
** Video formats ([[Multimedia container format]]) | ** Video formats (You can find links in [[Multimedia container format]]) | ||
** [https://vimeo.com/ Vimeo] Best quality video repository. For download, you will have to register. | |||
** http://video.google.com/videoadvancedsearch (Google video search) | ** http://video.google.com/videoadvancedsearch (Google video search) | ||
** https://addons.mozilla.org/en-US/firefox/addon/3006 | ** [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension. Allows to download from sites like YouTube. | ||
* Creating audios in HTML5 overview | * Creating audios in HTML5 overview | ||
* Converters | * Converters | ||
** [http://firefogg.org/ FireOgg] Firefox plugin for creating ogg and webm video files | ** Install [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files | ||
* Create an HTML5 file that includes video and audio | * 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 | ** 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 | ||
<source lang="XML"> | |||
<!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> | |||
</source> | |||
; Wednesday (to be confirmed) | ; Wednesday (to be confirmed) | ||
Revision as of 19:41, 22 April 2012
Week 5
Topics Covered
- Video/Audio formats and codecs
- Strategies for dealing with Video formats (Editing and conversion)
- Video with HTML5
- XML (some principles as explained in the Editing XML tutorial)
Teaching materials
- HTML5 audio and video
- Digital container format (Wikipedia)
- 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 and video download
- Video formats (You can find links in Multimedia container format)
- 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.
- Creating audios in HTML5 overview
- Converters
- 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
- Details TBA
Due: Moday, week 7