Multimedia slides

pamelafox · Jan 18, 2013 · f478383 · f478383
1 parent d1c4781
commit f478383
Show file tree

Hide file tree

Showing 22 changed files with 882 additions and 0 deletions.
diff --git a/app.yaml b/app.yaml
@@ -16,6 +16,13 @@ handlers:
 - url: /htmlcss-1day
   static_dir: htmlcss-1day
 
+- url: /multimedia/
+  static_files: multimedia/index.html
+  upload: multimedia/index.html
+
+- url: /multimedia
+  static_dir: multimedia
+
 - url: /data-modeling/
   static_files: data-modeling/index.html
   upload: data-modeling/index.html

diff --git a/data-modeling/exercises.html b/data-modeling/exercises.html
@@ -5,6 +5,7 @@
     <link rel="stylesheet" type="text/css" href="../common/bootstrap.css">
     <link type="text/javascript" href="../common/bootstrap.js">
     <title>Exercises</title>
+    <meta charset="utf-8">
 </head>
 <body>
     <div class="container">

diff --git a/multimedia/exercise1.html b/multimedia/exercise1.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap-responsive.css">
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap.css">
+    <link type="text/javascript" href="../common/bootstrap.js">
+    <title>Exercise 1: Audio and Video Tags</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Exercise 1: Audio and Video Tags</h1>
+
+      <ul>
+        <li>Start with this simple HTML5 webpage, save it as <code>multimedia.html</code><br>
+<pre>
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;   
+ <strong>&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Multimedia Madness&lt;/title&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+  Moving pictures and talking webpages, oh my!
+ &lt;/body&gt;</strong>
+&lt;/html&gt; 
+</pre>
+        <li>Go to <a href="http://www.lunerouge.org/spip/rubrique.php3?id_rubrique=49">this site</a> and find an Ogg audio file. Download it to the folder where you saved the file.
+        <li>Use the <code>audio</code> tag to embed the file on your page. Make sure it plays.
+        <li>Use attributes on the <code>audio</code> tag to make the file autoplay and loop forever.
+        <li>Take them off when you realize how annoying it is. :-)
+        <li>Go to <a href="http://commons.wikimedia.org/wiki/Category:Videos">Wikimedia commons</a> and find an Ogg video file. Download it to the folder where you saved the file.
+        <li>Use the <code>video</code> tag to embed the file on your page. Make sure it plays.
+        <li>Make the video 600 pixels wide and remove the controls, using attributes of the tag.
+        <li>If you still have time, look up the video and audio tag on the Mozilla Developer Network, read up on what attributes they have, and try adding other attributes to see what happens.
+      </ul>
+
+  <script>
+        function showSolution(num) {
+          if (confirm('You surrrrre?')) {
+            document.getElementById('solution' + num).style.display = 'block';
+          }
+        }
+  </script>
+  </body>
+</html>
+
diff --git a/multimedia/exercise1_solution.html b/multimedia/exercise1_solution.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>   
+ <head>
+  <meta charset="utf-8">
+  <title>Multimedia Madness</title>
+ </head>
+ <body>
+  Moving pictures and talking webpages, oh my!
+  <br>
+  <audio controls>
+  	<source src="heartbeat.ogg">
+    <source src="heartbeat.mp3">
+  </audio>
+
+ <br>
+  <video style="width:60%; max-width:400px;" controls autoplay>
+  	<source src="media/springs.oggtheora.ogv">
+  	<source src="media/springs.mp4.mp4">
+    <track src="subtitles.vtt" kind="subtitles" srclang="en">
+  </video>
+
+  <script>
+  var video = document.getElementsByTagName("video")[0];
+
+/*
+ var logTimer = window.setInterval(function() {
+	console.log(video.currentTime);
+	if (video.currentTime >= video.duration) {
+		window.clearInterval(logTimer);
+	}
+ }, 500);
+*/
+
+video.addEventListener('timechange', function() {
+	console.log(video.currentTime);
+}, false);
+
+// video.playbackRate = video.playbackRate * 2;
+   </script>
+
+ </body>
+</html> 
diff --git a/multimedia/exercise2.htm b/multimedia/exercise2.htm
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap-responsive.css">
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap.css">
+    <link type="text/javascript" href="../common/bootstrap.js">
+    <title>Exercise 2: Audio and Video Formats</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Exercise 2: Audio and Video Formats</h1>
+
+      <ul>
+        <li>Download <a href="TODO">this uncompressed audio file</a>.
+        <li>Use Media Converter to encode the file into 3 formats, the ones you will need for your 
+          site to work on Firefox, Chrome, and Safari.
+        <li>Download the encoded files into your project folder.
+        <li>Create an <code>audio</code> tag to embed the audio, using multiple <code>source</code>
+          tags to specify each file format. Make sure it plays on each browser.
+        <li>Download <a href="TODO">this uncompressed video file</a>.
+        <li>Use <strong>Miro Video</strong> to encode the file into 3 formats, the ones you will need for your 
+          site to work on Firefox, Chrome, and Safari.
+        <li>Download the encoded files into your project folder.
+        <li>Create a <code>video</code> tag to embed the audio, using multiple <code>source</code>
+          tags to specify each file format. Make sure it plays on each browser.
+      </ul>
+
+  <script>
+        function showSolution(num) {
+          if (confirm('You surrrrre?')) {
+            document.getElementById('solution' + num).style.display = 'block';
+          }
+        }
+  </script>
+  </body>
+</html>
+
diff --git a/multimedia/exercise2.html b/multimedia/exercise2.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap-responsive.css">
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap.css">
+    <link type="text/javascript" href="../common/bootstrap.js">
+    <title>Exercise 2: Audio and Video Formats</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Exercise 2: Audio and Video Formats</h1>
+
+      <ul>
+        <li>Download <a href="media/springs.mov">this file</a> or find a .mov on your file system (like from your digital camera).
+        <li>Use <a href="http://www.mediaconverter.org/">Media Converter</a> to encode the file into enough formats so that your
+          site will work on Firefox, Chrome, and Safari.
+        <li>Download the encoded files into your project folder.
+        <li>Create an <code>audio</code> tag to embed the audio, using multiple <code>source</code>
+          tags to specify each file format. Make sure it plays on each browser.
+        <li>Download an uncompressed video file (avi, flv, etc)
+        <li>Use <a href="http://www.mirovideoconverter.com/">Miro Video</a> to encode the file into enough formats so that your
+          site to work on Firefox, Chrome, and Safari.
+        <li>Download the encoded files into your project folder.
+        <li>Create a <code>video</code> tag to embed the audio, using multiple <code>source</code>
+          tags to specify each file format. Make sure it plays on each browser.
+        <li><strong>Bonus:</strong>Download <a href="http://www.longtailvideo.com/jw-player/">JWPlayer</a> and put the player.swf in your project folder. Add a flash fallback to your video tag. Specify the src URL like "player.swf?videoUrl=sayHello.mp3&amp;autoPlay=true"
+        <li><strong>Bonus:</strong>Try recording a video on your smartphone and figuring out how to get that encoded and on your webpage.
+      </ul>
+
+  <script>
+        function showSolution(num) {
+          if (confirm('You surrrrre?')) {
+            document.getElementById('solution' + num).style.display = 'block';
+          }
+        }
+  </script>
+  </body>
+</html>
+
diff --git a/multimedia/exercise3.html b/multimedia/exercise3.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap-responsive.css">
+    <link rel="stylesheet" type="text/css" href="../common/bootstrap.css">
+    <link type="text/javascript" href="../common/bootstrap.js">
+    <title>Exercise 3: Audio and Video APIs</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Exercise 3: Audio and Video APIs</h1>
+
+      <p>Let's make a synchronized audio/video watcher!</p>
+      <ul>
+        <li>Start with your solution from the first exercise.
+        <li>Add a "play" button to the HTML in the page.
+        <li>Add JavaScript to the bottom of the page that adds a "click" event listener to that button.
+          In the event callback, play both the audio and the video files.
+        <li>Do the same for a pause button.
+        <li>Add a "seeked" event listener to both the audio and video files. In the event callback,
+          find out the currentTime of whichever file finished seeking, and set the other file to that time as well.
+      </ul>
+
+  <script>
+        function showSolution(num) {
+          if (confirm('You surrrrre?')) {
+            document.getElementById('solution' + num).style.display = 'block';
+          }
+        }
+  </script>
+  </body>
+</html>
+
diff --git a/multimedia/heartbeat.ogg b/multimedia/heartbeat.ogg