Tutorial: YouTube card events.

One can send events from the playground via:
```js
Playground.conductor.cards['../cards/tutorial/youtube_card.js'][1][0].sandbox.videoPort.send('play');

// we add the video port to the window for convenience in the tutorial
window.videoPort.send('play');
```

Author: hjdivad

example/cards/tutorial/youtube_card.js

@@ -2,6 +2,18 @@ Conductor.require('/vendor/jquery.js');
 Conductor.requireCSS('/example/cards/tutorial/youtube_card.css');
 
 Conductor.card({
+  consumers: {
+    video: Conductor.Oasis.Consumer.extend({
+      events: {
+        play: function () {
+          this.card.loadPlayer().then(function (player) {
+            player.playVideo();
+          });
+        }
+      }
+    })
+  },
+
   videoId: null,
 
   activate: function (data) {
@@ -34,7 +46,7 @@ Conductor.card({
         $('#player').show();
         break;
       default:
-        throw new Error("Unuspported intent '" + intent + "'");
+        throw new Error("Unsupported intent '" + intent + "'");
     }
   },
 
@@ -102,6 +114,14 @@ Conductor.card({
           events: {
             onReady: function() {
               promise.resolve(player);
+            },
+            onStateChange: function (event) {
+              var playerState = event.data;
+              if (playerState === YT.PlayerState.ENDED &&
+                  card.consumers.video) {
+
+                card.consumers.video.send('videoWatched');
+              }
             }
           }
         });

example/playground/js/playground.js

@@ -43,6 +43,7 @@ window.Playground = {
       { videoId: '4d8ZDSyFS2g'}
     );
     this.addCard('../cards/tutorial/youtube_card.js', 1, []);
+    this.addCard('../cards/tutorial/youtube_card.js', 1, ['video']);
   }
 };