Day 37 – Interacting With Youtube Videos

Over a year ago, a friend of mine and I were dreaming up of ways to create a cool Kynetx getting started tutorial/demo. One of my ideas was to have a Kynetx app that took you through a few sites and showed stuff off while embedding a video on the page and syncing up the actions taken on the page with the video. Now that vision is a reality since YouTube has a JavaScript API available from their videos. I created a test app to test one aspect of the API and it’s shockingly simple.

ruleset a60x556 {
  meta {
    name "youtuber-test"
    description <<
      youtuber-test
    >>
    author "Mike Grace"
    logging on
  }

  dispatch {
    domain "youtube.com"
  }

  rule on_video_page {
    select when pageview "\/watch\?"
    {
      notify("Current Time","<h1 id='a60x556-time'>-</h1>") with sticky = true;
      emit <|
        KOBJ.a60x556.player = document.getElementById("movie_player");
        KOBJ.a60x556.update = function() {
          var current = KOBJ.a60x556.player.getCurrentTime()
          $K("#a60x556-time").text(current);
          setTimeout(function() {
            KOBJ.a60x556.update();
          }, 100);
        }

        KOBJ.a60x556.update();
      |>;
    }
  }
}
  • 16 only run on youtube pages with a single video loaded on the page. This selection expression is not robust enough to encompass all youtube pages with videos but it’s good enough for a demo app
  • 18 setup place to put current video time
  • 20 grab reference of embedded object
  • 21 function to got time of video and update to interface. Setting up function reference on the global KOBJ object so I can call it recursively
  • 26 update current time of video every 100 milliseconds. Could have set this lower or higher but this fits this demo well.
  • 29 get the recursive function going

App run on youtube.com video using a bookmarklet

Video Demo

Get the bookmarklet to try it out yourself!

Gratuitous day 37 Grace face

Advertisements
This entry was posted in Kynetx. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s