added test html files

13 years ago · b89d8478a6
4 changed files with 124 additions and 2 deletions
--- a/basicvideo.html
+++ 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>
--- 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",
--- a/videocanvas.html
+++ 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>
--- a/videocss.html
+++ 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>