Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

* Added Video tag sample integration with CAAT.

  • Loading branch information...
commit ebaf79969ca89498446a7e7d6948a4e6ba990de4 1 parent bcbbadd
Ibon Tolosana hyperandroid authored

Showing 1 changed file with 187 additions and 0 deletions. Show diff stats Hide diff stats

  1. +187 0 documentation/demos/demo17/video.html
187 documentation/demos/demo17/video.html
... ... @@ -0,0 +1,187 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2 + "http://www.w3.org/TR/html4/loose.dtd">
  3 +<html>
  4 +<head>
  5 +<script type="text/javascript">
  6 +
  7 + var _gaq = _gaq || [];
  8 + _gaq.push(['_setAccount', 'UA-17485141-1']);
  9 + _gaq.push(['_trackPageview']);
  10 +
  11 + (function() {
  12 + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  13 + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  14 + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  15 + })();
  16 +
  17 +</script>
  18 + <title>CAAT example: Video tag integration</title>
  19 +
  20 + <link rel="stylesheet" href="../style/demo.css">
  21 +
  22 +</head>
  23 +<body>
  24 +
  25 +<div id="page">
  26 + <div id="header">
  27 + <div style="text-align: center;">
  28 +
  29 + </div>
  30 + </div>
  31 +
  32 + <div id="content">
  33 + <div id="menu">
  34 +
  35 + </div>
  36 + <div id="experiment">
  37 + <div style="text-align:center">
  38 + <h1>Video tag integration</h1>
  39 + </div>
  40 + <div id="experiment-holder">
  41 + </div>
  42 + <div id="experiment-description">
  43 + <div>
  44 + <p>
  45 + How to use:
  46 + </p>
  47 + <ul>
  48 + <li>Move the mouse over the screen.</li>
  49 + </ul>
  50 +
  51 + <p>
  52 + This demo features the following elements:
  53 + </p>
  54 + <ul>
  55 + <li>Video tag integration.</li>
  56 + </ul>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + </div>
  61 + <div style="display:none;">
  62 + <video id="v1" autoplay="true" loop="true">
  63 + <source src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4" />
  64 + </video>
  65 + </div>
  66 +</div>
  67 +
  68 +</body>
  69 +
  70 +<script type="text/javascript" src="../menu/menu.js"></script>
  71 +<script type="text/javascript" src="../../../build/caat.js"></script>
  72 +<script type="text/javascript" src="../templates/startup-wo-splash/template.js"></script>
  73 +<script type="text/javascript">
  74 + /**
  75 + * @license
  76 + *
  77 + * The MIT License
  78 + * Copyright (c) 2010-2011 Ibon Tolosana, Hyperandroid || http://labs.hyperandroid.com/
  79 +
  80 + * Permission is hereby granted, free of charge, to any person obtaining a copy
  81 + * of this software and associated documentation files (the "Software"), to deal
  82 + * in the Software without restriction, including without limitation the rights
  83 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  84 + * copies of the Software, and to permit persons to whom the Software is
  85 + * furnished to do so, subject to the following conditions:
  86 +
  87 + * The above copyright notice and this permission notice shall be included in
  88 + * all copies or substantial portions of the Software.
  89 +
  90 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  91 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  92 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  93 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  94 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  95 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  96 + * THE SOFTWARE.
  97 + *
  98 + */
  99 +
  100 + (function() {
  101 + /**
  102 + * Startup it all up when the document is ready.
  103 + * Change for your favorite frameworks initialization code.
  104 + */
  105 + window.addEventListener(
  106 + 'load',
  107 + function() {
  108 + CAAT.modules.initialization.init(
  109 + 800, 600,
  110 + 'experiment-holder',
  111 + [],
  112 + __video
  113 + );
  114 + },
  115 + false);
  116 +
  117 +
  118 + function __video(director) {
  119 +
  120 + var video= document.getElementById('v1');
  121 + var scene= director.createScene();
  122 + var paddingLeft= 35;
  123 + var paddingTop= 35;
  124 + var numberPadding= 10;
  125 + var rows= 6;
  126 + var columns= 8;
  127 +
  128 + var fakeWidth= 700;
  129 + var fakeHeight= 500;
  130 + var fake= document.createElement('canvas');
  131 + fake.width= fakeWidth;
  132 + fake.height= fakeHeight;
  133 + var fakectx= fake.getContext('2d');
  134 + var ci= new CAAT.SpriteImage().initialize( fake, rows, columns );
  135 + var numberW= ci.singleWidth;
  136 + var numberH= ci.singleHeight;
  137 + var videoTimer= scene.createTimer(
  138 + 0,
  139 + 33,
  140 + function(scene_time, timer_time, timertask_instance) { // timeout
  141 + // reset the timer
  142 + timertask_instance.reset(scene_time);
  143 + // capture the frame
  144 + fakectx.drawImage( video, 0, 0, fake.width, fake.height );
  145 + }
  146 + );
  147 +
  148 +
  149 + var container= new CAAT.ActorContainer().
  150 + setBounds(0,0,director.width,director.height);
  151 +
  152 + for (var i = 0; i < rows; i++) {
  153 + for (var j = 0; j < columns; j++) {
  154 +
  155 + var actor = new CAAT.Actor().
  156 + setBackgroundImage(ci.getRef(), true).
  157 + setLocation(
  158 + paddingLeft + j * (numberPadding / 2 + numberW),
  159 + paddingTop + i * (numberPadding / 2 + numberH)).
  160 + setSpriteIndex( i*columns+j );
  161 +
  162 + actor.mouseEnter = function(mouseEvent) {
  163 + this.parent.setZOrder(this, Number.MAX_VALUE);
  164 + this.emptyBehaviorList();
  165 + this.addBehavior(
  166 + new CAAT.ScaleBehavior().
  167 + setFrameTime(this.time, 500).
  168 + setValues(1, 2, 1, 2).
  169 + setPingPong()
  170 + ).
  171 + addBehavior(
  172 + new CAAT.RotateBehavior().
  173 + setFrameTime(this.time, 500).
  174 + setValues(0, 2 * Math.PI)
  175 + );
  176 + };
  177 +
  178 + container.addChild(actor);
  179 + }
  180 + }
  181 +
  182 + scene.addChild(container);
  183 + }
  184 +
  185 + })();
  186 +</script>
  187 +</html>

0 comments on commit ebaf799

Please sign in to comment.
Something went wrong with that request. Please try again.