COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 20: Line 20:


* Using Videos in HTML5 overview and video download
* Using Videos in HTML5 overview and video download
** Tutorial: [[HTML5 audio and video]]
** Video formats (You can find links in [[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.
** [https://vimeo.com/ Vimeo] Best quality video repository. For download, you will have to register.

Revision as of 20:49, 22 April 2012

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

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

Classroom activities

Monday
<!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

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week6&oldid=38831"