Juan Benet / acorn / all


Video Highlights top

2013-06-06

At Athena, we strive to make explanations intuitive and accessible so that knowledge can be spread easily. There are lots of great explanations embedded within longer video lectures, so we built Acorn -- our media remixer -- to find and share them.

Recently, we wanted to address a particular problem when people share knowledge through video. Sometimes we get emails like this:

Sometimes they have diagrams:

Not so good.

Introducing: Highlights for Video

Today, we shipped a small but powerful feature to Acorn:

Highlights: mark and note parts of videos.

With highlights, you can "point out" specific sections of video. Whether for yourself in the future or for others you're sharing with, you can draw the viewer's attention to the parts you care about.

Highlights are similar to YouTube annotations or SoundCloud comments, but they work on any video compatible with Acorn. And they're scoped (see below). Let's take an in-depth look:

Marking the Timeline Attracts Focus

Acorn highlights are shown as yellow marks hovering over the playback timeline. They draw attention to the relevant parts, and inform the viewer where the intended messages are.

Active Highlights Improve Viewing Experience

As viewers, sometimes we want to jump directly to the highlighted part, and sometimes we want to watch the whole video. Our highlights allow both. You can watch the whole video as usual, now aware of where the important parts are. Or you can click on a highlight, and jump directly to the relevant part.

Highlight Notes Improve Navigation

Acorn highlights are also a way of noting video sections, or even indexing what can be found in the video. Highlights can have a short note that displays as playback reaches a highlighted part, and as users inspect (hover near) the highlight.

Scoped Highlights

One of the problems with YouTube annotations is that they're global. Either you see all annotations on a video, or none. With Acorn, anyone can create and share different sets of annotations on top of the same video.

Enough! How do I use it!?

Here's how you can add highlighting to a video in seconds:

  1. Go to http://acorn.athena.ai/new and paste the link to the video you want to highlight.
  2. Click + Highlight, this adds a highlight, and lets you edit it.
  3. Adjust the highlighted clip with the sliders (click the green checkbox when done) 3.5. Add a text note (optional)
  4. Save, and Share it!

Note: the highlight creation experience is still rough -- it ought to be smoother and simpler. But this is our first pass at it :). Expect it to get better -- if you have design suggestions, let us know!

Programmatic Highlighting?

Some users have a many videos to highlight, and already know the time codes of the relevant parts. Well, you're in luck! As described in an earlier post, Acorn stores media playback data as simple json objects. Thus, you can create highlights by generating Acorn json.

For example, take a look at the following Acorn json. Note the highlights array, and that each highlight is a dictionary with timeStart, timeEnd, and title.

{
  "acornid": "hhjgxvizys",
  "shell": {
    "highlights": [
      {
        "timeStart": 165,
        "title": "Whaaaale",
        "timeEnd": 167
      },
      {
        "timeStart": 22,
        "title": "Little Psy",
        "timeEnd": 29
      },
      {
        "timeStart": 130,
        "title": "Metro",
        "timeEnd": 153
      }
    ],
    "shellid": "acorn.HighlightsShell",
    "shell": {
      "loops": "one",
      "shellid": "acorn.YouTubeShell",
      "timeEnd": 253,
      "timeTotal": 253,
      "timeStart": 0,
      "link": "http://www.youtube.com/watch?v=9bZkp7q19f0"
    },
    "description": "Remix of \"PSY - GANGNAM STYLE\".",
    "thumbnail": "https://img.youtube.com/vi/9bZkp7q19f0/0.jpg",
    "title": "PSY - GANGNAM STYLE - Funniest Parts"
  },
  "owner": "juan",
  "thumbnail": "http://acorn.athena.ai/img/acorn.png",
  "created": "2013-06-08 07:51:32.444176",
  "updated": "2013-06-08 07:51:32.444176"
}

You can add a highlight by inserting its representation (dictionary) into the highlights array. Here we added the Elevator Guy highlight:

{
  "acornid": "hhjgxvizys",
  "shell": {
    "highlights": [
      {
        "timeStart": 114.5,
        "title": "Elevator Guy",
        "timeEnd": 123
      },
      {
        "timeStart": 165,
        "title": "Whaaaale",
        "timeEnd": 167
      },
  ...
}

Why is highlighting important?

Highlighting is one of the main forms of interaction with text. Pick up an avid reader's books or printed papers and you'll see this:

These humble markings are powerful. A simple background color shift demands attention, and implies importance. Scrawls jotted along margins suggest new ideas, or remind us of old ones.

These are recordings of our focus, of our thoughts. These are conversations, with the author, ourselves, and other readers. These are the shadows of ideas harmonizing together.

They are such an important part of the "text experience" that most widely used digital reading tools include a virtual version of highlighting:

But, why is this important experience limited to text?

No equivalent interaction existed with audio or video. The reason is obvious: these media (audio and video) had fundamentally different beginnings from text; they emerged ephemeral and broadcasted. There was no highlight marker for Radio or TV. No pen could annotate the information packets representing sounds or images. The technology simply didn't exist.

With computers, we can suddenly interact with video and audio as much as we interact with text. Over time, powerful video editing software began adding annotation features. Video creators could add notes, highlights, and sketches on top of video. But this has remained exclusively the realm of video creators, not viewers. To match the text experience, viewers should be able to easily and quickly annotate or highlight the videos they watch.

In building Acorn, we realized that the simple and powerful human interfaces we use for text (highlight markers, pens) can carry over to the web. In seconds we can "mark" a timeline to highlight a video section. And we can add "margin notes" just the same. So we had to build it! We're proud to move the web forward with our first stab at video annotations -- yes, there's more to come :)

The Annotated Web

Marc Andreessen talks about how annotations were originally built into Mosaic. Unfortunately, the primeval browser lost that paradigm, but perhaps we can bring it back. Today, Evernote clips text and images, RapGenius annotates texts, and now Acorn highlights video. Others are coming -- join the conversation at iannotate!

The web is starting to bloom with the traces of our thoughts. Perhaps soon, we might just realize the annotated trails of Vannevar Bush's Memex.

Let's just avoid carrying over this madness:

highlight-all-the-things


One Player to Play Them All top

2013-05-13

The Lord of the Rings is one of my favorite books. This little-known tale of adventure features an amazingly powerful ring, bearing an enchanted inscription that reads:

Ash nazg durbatul√Ľk, ash nazg gimbatul,
Ash nazg thrakatul√Ľk agh burzum-ishi krimpatul.

That's in orcish, a most soothing language. It loosely translates to:

One player to play them all, one player to detect them,
One player to embed them all and in your webpage play them.

How or why a ring of power forged in the fires of a terrible active volcano ages ago would bear such prescient web-development advice, we'll never know. But we have heeded it. We have answered J.R.R. Tolkien's call for a powerful media player that can leverage all other media players, to play anything.

The birth of Acorn-Player

At Athena, we need to collect the world's best explanations for all knowledge. These explanations are strewn across the web, in all sorts of formats. One YouTube video features Feynman explaining what heat is. Another video, in Vimeo this time, explains "What is a flame?" Beyond video, there are scores of images, documents, interactive webpages, and so on.

We needed a way to allow our users to input ANY link to the explanations they find across the net, and embed them uniformly. In particular, the embedding should be smart: links to videos should embed only the video, regardless of the hosting service (and their particular embed code). Moreover, one ought to be able to clip the video and embed only the relevant part.

We looked around the web to find existing javascript libraries that would do such things. We figured that since sites like facebook and twitter do some smart embedding, there would be an open source library to help us. But to our surprise we found none! So... we wrote one.

What is it?

Acorn-Player is an open-source JS/CSS/HTML library that:

  1. recognizes how to properly embed all kinds of links
  2. provides a uniform player interface
  3. can remix media (more on that in later posts)

The github repo is at: https://github.com/athenalabs/acorn-player

You can see it in action at: https://acorn.athena.ai

And it looks like this:

How do I use it?

So Acorn-Player can take any sort of media link and embed it correctly in your website. You can see the types of media it recognizes specially here (the worst case is a simple iframe). Right now, it's not that smart yet, but the infrastructure is all in place and now it's learning about more and more kinds of media. It also lets you combine those pieces of media in various ways: playlists, galleries, spliced videos, and more.

You can use it in two ways:

Embed Acorns in your Website

You can make and save acorns at https://acorn.athena.ai. You can then embed them with code like this:

<iframe width="600" height="400" src="http://acorn.athena.ai/embed/wijkrivqtr" scrolling="no" frameborder="0" allowfullscreen="yes" webkitallowfullscreen="yes" mozallowfullscreen="yes"></iframe>

Add acorn-player.js

You can add the library to your website (see github repo for details), and then create and embed acorns like this:

// with just a link
link = 'http://www.youtube.com/watch?v=CbIZU8cQWXc';
player = new acorn.player.Player({ data: link });
player.appendTo($('body'));
// or with more complicated data
player = new acorn.player.Player({ data: {
  "acornid": "new",
  "shell": {
    "shell": "acorn.YouTubeShell",
    "link": "http://www.youtube.com/watch?v=CbIZU8cQWXc",
    "timeStart": 160,
    "timeEnd": 320
  },
}});
player.appendTo($('body'));

How does it work?

Acorn-Player plays acorns (surprise!). What are acorns? They are data-representations of web media. Acorn-player takes these as input, and transforms them into playable media. For example, see these JSON acorns and what happens when they're fed to acorn-players:

// an acorn that plays a youtube video
{
  "shell": {
    "shell": "acorn.YouTubeShell",
    "link": "http://www.youtube.com/watch?v=CbIZU8cQWXc",
    "timeStart": 160,
    "timeEnd": 320
  }
}
// an acorn that displays an image
{
  "shell": {
    "shell": "acorn.ImageShell",
    "link": "http://static.benet.ai/t/purpose.png"
  }
}
// an acorn that displays a playlist
{
  "shell": {
    "shell": "acorn.CollectionShell",
    "shells": [
      {
        "shell": "acorn.YouTubeShell",
        "link": "http://www.youtube.com/watch?v=CbIZU8cQWXc"
      },
      {
        "shell": "acorn.YouTubeShell",
        "link": "http://www.youtube.com/watch?v=BFO2usVjfQc"
      },
      {
        "shell": "acorn.YouTubeShell",
        "link": "http://www.youtube.com/watch?v=WlGemHL5vLY"
      },
      {
        "shell": "acorn.VimeoShell",
        "link": "http://vimeo.com/38101676"
      }
    ]
  }
}

And what else?

Acorn-Player is a work in progress. It is already pretty powerful, but there is so much more we have planned for it. This is just the beginning. Go check out the github repo, and see what we're working on now, what's coming soon, etc.

And, it's open-source! So please report issues + send us pull requests.

We also built a free web service, https://acorn.athena.ai, to store acorn data. More on that later :).