Popcorn.js

A project I have been working on is an HTML video library called Popcorn.js. A demo that was put together, this is the demo that is being shown tomorrow at Mozilla summit 2010, so if you are an attendee, you might want to hold off on spoiling the demo πŸ˜‰

What this is, at heart, is an XML grammar, that defines various “commands” that can be used with the video, based on the video’s current time. So you can load a google news article about whatever you define in the xml tag, at a certain time in the video. For example: <googlenews in=”00:00:05:02″ out=”00:00:10:07″ target=”googlenewsdiv” topic=”Village Telco”/> googlenews is the keyword for the command type, in is when the news articles can be loaded, and out is when it should leave. Target is where you want to put the article, and topic is the search topic to be used in the article. Currently we have 11 “commands”, including:

  • subtitles
  • foot note
  • flickr
  • twitter
  • google maps
  • google news
  • wikipedia
  • attribution
  • lower third
  • credits
  • tag this video (like tag this photo from facebook)

Some of my favorites are:

  • Subtitles, which can be translated to any language real time using google translate, which is pretty awesome.
  • Flickr, which despite being quite simple, was made purely by me, and not a third party script + widget I am hooking into, so I will always like it πŸ˜‰
  • Credits, they are just awesome, and quite fun. Also, it is unique from all other commands, in that it’s only loaded once at the end.
  • twitter, I still don’t have twitter, but I am warming up to the idea. I like this command though, as it’s probably going to be the most popular, and allows real time chat about a topic in the video using hastags.

Some tags, like the example above is self closing < /&gt and others, like subtitle, contains the text between < ></ &gt.

Some things I think we did wrong, concerns, things I want to add and that we plan on changing in 0.2 is:

  • Using jquery right in the library is my number one concern. We did this because we were making the library while making the demo, and some of it got blurred, but that’s ok, because these things are never right the first time.
  • Similar to the last one, but we need to think more in terms of using data and functionality, and not about graphics and putting data right inside the library, again, blurring the lines between library and demo. Our library should be more customizable, and less flashy, and we put the flashy in the demo on one of many ways you can use this library.
  • Something that was mentioned to me by the chair of computer studies are Seneca college Evan Weaver is that we should make a way for new commands to be plugged in, so anyone can add functionality as they wish, and distribute additional features in the form of addons.
  • Really break the video out of it’s little tv some more. So many websites display the video as a self contained element, and that’s what we want to blur, and ultimately break. One way I want to do this, is to make the video one element, a new command, and the webpage itself is the video. So you could go so far as to using this library, and never even use a video, and we can also have an audio command.Β  πŸ™‚
  • Breaking the video’s time bar also helps to do that last idea, and this way, you can display two videos, and change them based on a toggle on the website somewhere, if you say, want to display a video with two separate views, in real time.
  • Further down the line, is to make a website that can generate this xml, from some GUI interface, so you don’t have to make all these xml tags, which can be very very time consuming. I know from experience πŸ˜‰

If you want to get involved, we use lighthouse to track bugs, and you can find us on irc under irc.mozilla.org/popcorn. Come and share your ideas.

One final note, while adding subtitles to the top most demo, we got into an argument about what was being said. If you want to help the cause, you can check out 1:48 of the demo, and give me your opinion on what he’s actually saying.

Check out what another developer on this project is saying here.

Advertisements

One Response to “Popcorn.js”

  1. […] this demo is, is just a simple hack of processing.js, popcorn.js and box2d.js, and a previous demo made by Andor Salga, (which is currently broken) which I stole,Β  […]

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

%d bloggers like this: