Permalink
Browse files

Finished first complete demo

  • Loading branch information...
1 parent a3c4428 commit 39cf3489d380eb3b2ba38190f3fe7f490921532a @rdworth committed Dec 16, 2011
Showing with 33 additions and 2 deletions.
  1. +2 −0 demo/demo.css
  2. +9 −2 demo/demo.html
  3. +22 −0 demo/demo.js
View
@@ -0,0 +1,2 @@
+#voo-transcript { float: right; width: 400px; font-size: 1.5em; padding-right: 2em; height: 360px; overflow: hidden; }
+#voo-transcript .active { background: lightBlue; }
View
@@ -12,8 +12,15 @@
<script src=demo.js></script>
</head>
<body>
-
-<h1>voo.js</h1>
+<video id="voo" controls>
+<source src="../video/slipsum.webm"></source>
+</video>
+<div id="voo-transcript">
+ <p><span data-time="2.336">You think water moves fast?</span> <span data-time="3.947">You should see ice.</span> <span data-time="5.191">It moves like it has a mind.</span> <span data-time="6.872">Like it knows it killed the world once and got a taste for murder.</span> <span data-time="10.216">After the avalanche, it took us a week to climb out.</span> <span data-time="13.049">Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide...</span> <span data-time="17.808">and only five made it out.</span> <span data-time="19.558">Now we took an oath, that I'm breaking now.</span> <span data-time="22.079">We said we'd say it was the snow that killed the other two, but it wasn't.</span> <span data-time="25.656">Nature is lethal but it doesn't hold a candle to man.</span></p>
+ <p><span data-time="30.128">Now that we know who you are, I know who I am.</span> <span data-time="32.807">I'm not a mistake!</span> <span data-time="34.062">It all makes sense!</span> <span data-time="35.656">In a comic, you know how you can tell who the arch-villain's going to be?</span> <span data-time="38.968">He's the exact opposite of the hero.</span> <span data-time="41.04">And most times they're friends, like you and me!</span> <span data-time="43.401">I should've known way back when...</span> <span data-time="45.16">You know why, David?</span> <span data-time="46.272">Because of the kids.</span> <span data-time="47.759">They called me Mr Glass.</span></p>
+ <p><span data-time="50.48">Yeah, I like animals better than people sometimes...</span> <span data-time="53.103">Especially dogs.</span> <span data-time="54.414">Dogs are the best.</span> <span data-time="55.856">Every time you come home, they act like they haven't seen you in a year.</span> <span data-time="58.944">And the good thing about dogs...</span> <span data-time="60.22">is they got different dogs for different people.</span> <span data-time="62.424">Like pit bulls.</span> <span data-time="63.471">The dog of dogs.</span> <span data-time="64.897">Pit bull can be the right man's best friend...</span> <span data-time="66.859">or the wrong man's worst enemy.</span> <span data-time="68.699">You going to give me a dog for a pet, give me a pit bull.</span> <span data-time="71.392">Give me...</span> <span data-time="72.111">Raoul.</span> <span data-time="72.978">Right, Omar?</span> <span data-time="73.831">Give me Raoul.</span></p>
+</div>
</body>
+
</html>
View
@@ -0,0 +1,22 @@
+var times =[2.336, 3.947, 5.191, 6.872, 10.216, 13.049, 17.808, 19.558, 22.079, 25.656, 30.128, 32.807, 34.062, 35.656, 38.968, 41.04, 43.401, 45.16, 46.272, 47.759, 50.48, 53.103, 54.414, 55.856, 58.944, 60.22, 62.424, 63.471, 64.897, 66.859, 68.699, 71.392, 72.111, 72.978, 73.831];
+
+$(function() {
+
+ var pop = Popcorn("#voo");
+ var trans = $("#voo-transcript");
+
+ trans.find("[data-time]").each(function(i) {
+ $(this).addClass("vkf-" + i);
+ });
+
+ $.each( times, function( i, time ) {
+ pop.cue( time, function() {
+ trans.animate({
+ scrollTop: trans.scrollTop() + trans.find(".vkf-" + i).position().top - 160
+ })
+ trans.find(".active").removeClass("active");
+ trans.find(".vkf-" + i).addClass("active");
+ });
+ });
+
+});

0 comments on commit 39cf348

Please sign in to comment.