COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 69: Line 69:
         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>  

Revision as of 11:26, 17 February 2014

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

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>

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

Homework 6

Create an HTML5 file that includes at least

  1. a video in two different container variants (webm, ogg, mp4)
  2. an audio (mp3)
  3. 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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week6&oldid=51030"