From b89d8478a6f7965329edb6d0577230800e3aebe1 Mon Sep 17 00:00:00 2001
From: Sanj <b@pad.ma>
Date: Sat, 5 Feb 2011 11:10:18 +0530
Subject: [PATCH] added test html files

---
 basicvideo.html  | 34 ++++++++++++++++++++++++++++++++++
 index.html       |  4 ++--
 videocanvas.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 videocss.html    | 41 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 basicvideo.html
 create mode 100644 videocanvas.html
 create mode 100644 videocss.html
diff --git a/basicvideo.html b/basicvideo.html
new file mode 100644
index 0000000..6800ee5
--- /dev/null
+++ b/basicvideo.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript">
+
+$(function() {
+  $('#do').click(function() {
+    var html = $('#testCode').val();
+    $('#preview').html(html);
+  });
+});
+    </script>
+    <style type="text/css">
+#testCode {
+  width: 500px;
+  height: 300px;
+  font-size: 20px;
+}
+    </style>
+
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="preview"></div>
+      <div id="txtWrap">
+        <textarea id="testCode"></textarea><br />
+        <button id="do">Do</button>
+      </div>
+    </div>
+
+  </body>
+
+</html>
diff --git a/index.html b/index.html
index 2dc37cb..9e8fcf9 100644
--- a/index.html
+++ b/index.html
@@ -35,11 +35,11 @@ var allSlides =
   },
   {
     "title": "And &lt;canvas /> if you like...",
-    "iframe": "videocanvas.html"
+    'iframe': 'http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml'
   },
   {
     "title": "You begin to get the idea...",
-    'iframe': 'http://hacks.mozilla.com'
+    'iframe': 'http://html5doctor.com/demos/video-canvas-magic/demo1.html'
   },
   {
     "title": "Give me my Javascript",
diff --git a/videocanvas.html b/videocanvas.html
new file mode 100644
index 0000000..ea052eb
--- /dev/null
+++ b/videocanvas.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript">
+
+$(function() {
+  $('#do').click(function() {
+    var code = $('#testCode').val();
+    eval(code);
+  });
+});
+    </script>
+    <style type="text/css">
+#testCode {
+  width: 500px;
+  height: 300px;
+  font-size: 20px;
+}
+
+#video1 {
+  width: 320px;
+}
+
+    </style>
+
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="preview">
+        <video id="video1" class="testvideo" src="test1.ogg" controls="controls"></video>
+        <canvas id="canvas" width="320" height="240"></canvas>
+      </div>
+      <div id="txtWrap">
+        <textarea id="testCode">
+var canvas = document.querySelector("canvas");
+var ctx = canvas.getContext("2d");
+var video = document.getElementById("video1");
+ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
+        </textarea><br />
+        <button id="do">Do</button>
+      </div>
+    </div>
+
+  </body>
+
+</html>
diff --git a/videocss.html b/videocss.html
new file mode 100644
index 0000000..9f73f5a
--- /dev/null
+++ b/videocss.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript">
+
+$(function() {
+  $('#do').click(function() {
+    var code = $('#testCode').val();
+    eval(code);
+  });
+});
+    </script>
+    <style type="text/css">
+#testCode {
+  width: 500px;
+  height: 150px;
+  font-size: 20px;
+}
+
+.testvideo {
+  width: 320px;
+}
+    </style>
+
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="preview">
+        <video id="video1" class="testvideo" src="test1.ogg" controls="controls"></video>
+        <video id="video2" class="testvideo" src="test2.ogg" controls="controls"></video>
+      </div>
+      <div id="txtWrap">
+        <textarea id="testCode"></textarea><br />
+        <button id="do">Do</button>
+      </div>
+    </div>
+
+  </body>
+
+</html>
