Team:Calgary/VGSandbox

From 2012.igem.org

(Difference between revisions)
 
(40 intermediate revisions not shown)
Line 1: Line 1:
-
<style>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
* { margin: 0;}
+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
body { font-family: helvetica; padding: 10px; }
+
<head>
-
input { width: 50px; }
+
<title>iGEMGameV1_1</title>
-
/*video, canvas { display: block; }*/
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
p { margin-top: 20px;}
+
<style type="text/css" media="screen">
-
</style>
+
html, body { height:100%; background-color: #ffffff;}
-
</head>
+
body { margin:0; padding:0; overflow:hidden; }
-
<body>
+
#flashContent { width:100%; height:100%; }
-
  <video height="360" width="480">
+
</style>
-
    <source src="assets/dizzy.mp4" />
+
</head>
-
    <source src="assets/dizzy.ogv" />
+
<body>
-
  </video><canvas></canvas>
+
<div id="flashContent">
-
  <p>
+
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="480" id="iGEMGameV1_1" align="middle">
-
    <input type="button" id="play" value="play">
+
<param name="movie" value="iGEMGameV1_1.swf" />
-
    <span id="position">00:00</span> / <span id="duration"></span>
+
<param name="quality" value="high" />
-
  </p>
+
<param name="bgcolor" value="#ffffff" />
-
<script src="/js/h5utils.js"></script>
+
<param name="play" value="true" />
-
<script>
+
<param name="loop" value="true" />
-
var video = document.querySelector('video');
+
<param name="wmode" value="window" />
-
var togglePlay = document.querySelector('#play');
+
<param name="scale" value="showall" />
-
var position = document.querySelector('#position');
+
<param name="menu" value="true" />
-
var canvas = document.querySelector('canvas');
+
<param name="devicefont" value="false" />
-
var ctx = canvas.getContext('2d');
+
<param name="salign" value="" />
-
 
+
<param name="allowScriptAccess" value="sameDomain" />
-
addEvent(togglePlay, 'click', function () {
+
<!--[if !IE]>-->
-
  video.playbackRate = 0.5;
+
<object type="application/x-shockwave-flash" data="iGEMGameV1_1.swf" width="640" height="480">
-
  if (video.paused) {
+
<param name="movie" value="iGEMGameV1_1.swf" />
-
    if (video.ended) video.currentTime = 0;
+
<param name="quality" value="high" />
-
    video.play();
+
<param name="bgcolor" value="#ffffff" />
-
    this.value = "pause";
+
<param name="play" value="true" />
-
  } else {
+
<param name="loop" value="true" />
-
    video.pause();
+
<param name="wmode" value="window" />
-
    this.value = "play";
+
<param name="scale" value="showall" />
-
  }
+
<param name="menu" value="true" />
-
});
+
<param name="devicefont" value="false" />
-
 
+
<param name="salign" value="" />
-
setInterval(function () {
+
<param name="allowScriptAccess" value="sameDomain" />
-
  position.innerHTML = asTime(video.currentTime);
+
<!--<![endif]-->
-
 
+
<a href="http://www.adobe.com/go/getflash">
-
  // ctx.restore();
+
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
-
  ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
+
</a>
-
}, 1000 / 15);
+
<!--[if !IE]>-->
-
 
+
</object>
-
addEvent(video, 'ended', function () {
+
<!--<![endif]-->
-
  togglePlay.value = "play";
+
</object>
-
});
+
</div>
-
 
+
</body>
-
addEvent(video, 'canplay', function () {
+
</html>
-
  video.muted = true;
+
-
  document.querySelector('#duration').innerHTML = asTime(this.duration);
+
-
  startCanvas();
+
-
});
+
-
 
+
-
 
+
-
function startCanvas() {
+
-
  canvas.setAttribute('height', Math.floor(video.height));
+
-
  canvas.setAttribute('width', Math.floor(video.width));
+
-
 
+
-
  ctx.translate(canvas.width/2, canvas.height/2);
+
-
  ctx.scale(-1, 1);
+
-
  ctx.translate(-canvas.width/2, -canvas.height/2);
+
-
  ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
+
-
 
+
-
  // var mirror = canvas.height * 0.6;
+
-
  // var grad = ctx.createLinearGradient(0, 0, 0, mirror);
+
-
  // grad.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
+
-
  // grad.addColorStop(1, 'rgba(0, 0, 0, 1)');
+
-
  // ctx.fillStyle = grad;
+
-
  // ctx.rect(0, 0, canvas.width, mirror);
+
-
  // ctx.fill();
+
-
  // ctx.save(); 
+
-
}
+
-
 
+
-
function asTime(t) {
+
-
  t = Math.round(t);
+
-
  var s = t % 60;
+
-
  var m = Math.round(t / 60);
+
-
 
+
-
  return two(m) + ':' + two(s);
+
-
}
+
-
 
+
-
function two(s) {
+
-
  s += "";
+
-
  if (s.length < 2) s = "0" + s;
+
-
  return s;
+
-
}
+
-
</script>
+
-
</body>
+

Latest revision as of 21:54, 7 September 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> iGEMGameV1_1

Retrieved from "http://2012.igem.org/Team:Calgary/VGSandbox"