Permalink
Browse files

* Added Video tag sample integration with CAAT.

  • Loading branch information...
1 parent bcbbadd commit ebaf79969ca89498446a7e7d6948a4e6ba990de4 hyperandroid committed Nov 9, 2011
Showing with 187 additions and 0 deletions.
  1. +187 −0 documentation/demos/demo17/video.html
@@ -0,0 +1,187 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-17485141-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+</script>
+ <title>CAAT example: Video tag integration</title>
+
+ <link rel="stylesheet" href="../style/demo.css">
+
+</head>
+<body>
+
+<div id="page">
+ <div id="header">
+ <div style="text-align: center;">
+
+ </div>
+ </div>
+
+ <div id="content">
+ <div id="menu">
+
+ </div>
+ <div id="experiment">
+ <div style="text-align:center">
+ <h1>Video tag integration</h1>
+ </div>
+ <div id="experiment-holder">
+ </div>
+ <div id="experiment-description">
+ <div>
+ <p>
+ How to use:
+ </p>
+ <ul>
+ <li>Move the mouse over the screen.</li>
+ </ul>
+
+ <p>
+ This demo features the following elements:
+ </p>
+ <ul>
+ <li>Video tag integration.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div style="display:none;">
+ <video id="v1" autoplay="true" loop="true">
+ <source src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4" />
+ </video>
+ </div>
+</div>
+
+</body>
+
+<script type="text/javascript" src="../menu/menu.js"></script>
+<script type="text/javascript" src="../../../build/caat.js"></script>
+<script type="text/javascript" src="../templates/startup-wo-splash/template.js"></script>
+<script type="text/javascript">
+ /**
+ * @license
+ *
+ * The MIT License
+ * Copyright (c) 2010-2011 Ibon Tolosana, Hyperandroid || http://labs.hyperandroid.com/
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+ (function() {
+ /**
+ * Startup it all up when the document is ready.
+ * Change for your favorite frameworks initialization code.
+ */
+ window.addEventListener(
+ 'load',
+ function() {
+ CAAT.modules.initialization.init(
+ 800, 600,
+ 'experiment-holder',
+ [],
+ __video
+ );
+ },
+ false);
+
+
+ function __video(director) {
+
+ var video= document.getElementById('v1');
+ var scene= director.createScene();
+ var paddingLeft= 35;
+ var paddingTop= 35;
+ var numberPadding= 10;
+ var rows= 6;
+ var columns= 8;
+
+ var fakeWidth= 700;
+ var fakeHeight= 500;
+ var fake= document.createElement('canvas');
+ fake.width= fakeWidth;
+ fake.height= fakeHeight;
+ var fakectx= fake.getContext('2d');
+ var ci= new CAAT.SpriteImage().initialize( fake, rows, columns );
+ var numberW= ci.singleWidth;
+ var numberH= ci.singleHeight;
+ var videoTimer= scene.createTimer(
+ 0,
+ 33,
+ function(scene_time, timer_time, timertask_instance) { // timeout
+ // reset the timer
+ timertask_instance.reset(scene_time);
+ // capture the frame
+ fakectx.drawImage( video, 0, 0, fake.width, fake.height );
+ }
+ );
+
+
+ var container= new CAAT.ActorContainer().
+ setBounds(0,0,director.width,director.height);
+
+ for (var i = 0; i < rows; i++) {
+ for (var j = 0; j < columns; j++) {
+
+ var actor = new CAAT.Actor().
+ setBackgroundImage(ci.getRef(), true).
+ setLocation(
+ paddingLeft + j * (numberPadding / 2 + numberW),
+ paddingTop + i * (numberPadding / 2 + numberH)).
+ setSpriteIndex( i*columns+j );
+
+ actor.mouseEnter = function(mouseEvent) {
+ this.parent.setZOrder(this, Number.MAX_VALUE);
+ this.emptyBehaviorList();
+ this.addBehavior(
+ new CAAT.ScaleBehavior().
+ setFrameTime(this.time, 500).
+ setValues(1, 2, 1, 2).
+ setPingPong()
+ ).
+ addBehavior(
+ new CAAT.RotateBehavior().
+ setFrameTime(this.time, 500).
+ setValues(0, 2 * Math.PI)
+ );
+ };
+
+ container.addChild(actor);
+ }
+ }
+
+ scene.addChild(container);
+ }
+
+ })();
+</script>
+</html>

0 comments on commit ebaf799

Please sign in to comment.