Planet WebMadeMovies

October 11, 2014

Brett Gaylor

From Mozilla to new making

Yesterday was my last day as an employee of the Mozilla Foundation. I’m leaving my position as VP, Webmaker to create an interactive web series about privacy and the economy of the web.

I’ve had the privilege of being a “crazy Mofo” for nearly five years. Starting in early 2010, I worked with David Humphrey and researchers at the Center for Development of Open Technology to create Popcorn.js. Having just completed “Rip!”, I was really interested in mashups - and Popcorn was a mashup of open web technology questions (how can we make video as elemental an element of the web as images or links?) and formal questions about documentary (what would a “web native” documentary look like? what can video do on the web that it can’t do on TV?). That mashup is one of the most exciting creative projects I’ve ever been involved with, and lead to a wonderful amount of unexpected innovation and opportunity. An award winning 3D documentary by a pioneer of web documentaries, the technological basis of a cohort of innovative(and fun) startups, and a kick ass video creation tool that was part of the DNA of Webmaker.org - which this year reached 200,000 users and facilitated the learning experience of over 127,200 learners face to face at our annual Maker Party.

Thinking about video and the web, and making things that aim to get the best of both mediums, is what brought me to Mozilla - and it’s what’s taking me to my next adventure.

I’m joining my friends at Upian in Paris (remotely, natch) to direct a multi-part web series around privacy, surveillance and the economy of the web. The project is called Do Not Track and it’s supported by the National Film Board of Canada, Arte, Bayerischer Rundfunk (BR), the Tribeca Film Institute and the Centre National du Cinéma. I’m thrilled by the creative challenge and humbled by the company I’ll be keeping - I’ve wanted to work with Upian since their seminal web documentary Gaza/Sderot and have been thrilled to watch from the sidelines as they’ve made Prison Valley, Alma, MIT’s Moments of Innovation project, and the impressive amount of work they do for clients in France and around the world. These are some crazy mofos, and they know how to ship.

Fake it Till You Make it

Mozilla gave me a wonderful gift: to innovate on the web, to dream big, without asking permission to do so. To in fact internalize innovation as a personal responsibility. To hammer into me every day the belief that for the web to remain a public resource, the creativity of everyone needs to be brought to the effort. That those of us in positions of privilege have a responsibility to wake up every day trying to improve the network. It’s a calling that tends to attract really bright people, and it can elicit strong feelings of impostor syndrome for a clueless filmmaker. The gift Mozilla gave me is to witness first hand that even the most brilliant people, or especially the most brilliant people, are making it up every single day. That’s why the web remains as much an inspiration to me today as when I first touched it as a teenager. Even though smart people criticize sillicon valley’s hypercapitalism, or while governments are breeding cynics and mistrust by using the network for surveillance, I still believe the web remains the best place to invent your future.

I’m very excited, and naturally a bit scared, to be making something new again. Prepare yourself - I’m going to make shit up. I’ll need your help.

Working With

source

“Where some people choose software projects in order to solve problems, I have taken to choosing projects that allow me to work with various people. I have given up the comfort of being an expert , and replaced it with a desire to be alongside my friends, or those with whom I would like to be friends, no matter where I find them. My history among this crowd begins with friendships, many of which continue to this day.

This way of working, where collegiality subsumes technology or tools, is central to my personal and professional work. Even looking back over the past two years, most of the work I’ve done is influenced by a deep desire to work with rather than on. ” - On Working With Instead of On

David Humphrey, who wrote that, is who I want to be when I grow up. I will miss daily interactions with him, and many others who know who they are, very much. “In the context of working with, technology once again becomes the craft I both teach and am taught, it is what we share with one another, the occasion for our time together, the introduction, but not the reason, for our friendship.”

Thank you, Mozilla, for a wonderful introduction. Till the next thing we make!

October 11, 2014 05:00 PM

March 14, 2012

Scott Downe

Getting started with contributing to Processing.js or Popcorn.js

So, the first two open source projects I was involved in have a fairly similar work flow, and I decided to write down the steps to get started in these projects.

Both Processing and Popcorn have fairly good intro sites, and I would start there. Popcorn also have secondary site that is useful. Also might want to check out the original Processing. Those sites provide a general introduction on the projects, and not something I will be covering here.

Both projects have four primary things, an issue tracker, a source repository, revision control, and a developer community.

An issue tracker is where bugs and new features get tracked, assigned, and reviewed. Both projects use something called lighthouse as their issue tracker. These can be found here for popcorn and here for processing. Issues can be anything from whitespace fixes, to documentation changes to complete rewrites. The pages I liked are the recent activity pages. You may want to look under milestones to get a list of potential tickets.

A source repository is a place where the code is stored and updated. Both projects use github as their source repository. These can be found here for popcorn and here for processing. Those are our release repos, in that they only get updated once for each release. If you want the unreleased code, you have to get that from a separate repo. These can be found here for popcorn and here for processing. We call these development branches.

Both projects use git for revision control. It goes hand in hand with github, but I do feel like it is a different thing. Source repository is where the code is kept, and revision control are the tools that interact with it. This is how I like to think of it, as it helps me understand it the way I need to work with it. I might not be technically correct with the definitions, though. Kinda like how the alphabet is not actually a song, but a song helps to understand it.

Both projects use irc for their developer community. This is the place you can go to get real time help from the people that have the answers. Popcorn uses the channel #popcorn and processing #processing.js. These can be found on the server irc.mozilla.org. More information about connecting to irc can be found here or here.

Now that that is out of the way, you will want to create a github account if you don’t already have one, then fork one of the projects from their github page. You will probably want to fork one of the development repos.

From there, you will need to get that github repo onto your local machine. I used this post when I started this, and I recommend it to others.

Next step is to find a bug on one of the lighthouse pages. Maybe comment in the bug that you are interested in working on it, so others know not to work on it as well.

You will want to create a branch on your local git repo named after your bug number. So, if my bug is popcorn bug #927 I will want to create a branch called t927. We add the t because code commits can be shorthanded to numbers, and there may be collisions in branch names and commits. Always good practice to but a letter in it. You can do this by running this command:

git branch t927 develop
git checkout t927

What this does is created a branch named t927 that is based off the branch develop. Then, moves you over to that branch.

Next you can go about changing the code in your local git repo. Once done, you will want to run some git commands.

1. git status: this shows the files that have changed, that you may need to commit.

2. git add: this adds those files. If you notice running git status after a git add, things will of changed.

3. git commit: this commits those added files. Again, running git status after this, you should see even more changes. I like to run this command like this:

git commit -m “[#927] usefull message about what I did”

This will add a message to the commit, so future developers can see why certain lines were changed, and even track it back to the original lighthouse ticket.

4. git push: this pushes the changes into your forked github repo. An example of this command for when I do it is:

git push git@github.com:ScottDowne/popcorn-js.git t927

This command takes the ssh url of my repo, and a name to name for the branch. After doing this, I could find my branch here: https://github.com/ScottDowne/popcorn-js/tree/t927 and my changes here: https://github.com/ScottDowne/popcorn-js/commits/t927

From here you will want to take one of those two urls and drop it back intp the lighthouse ticket, as a comment, and change the status to peer-review-requested. Both projects have a two step review process. Peer-review and super-review. Once both reviews passed, the repo manager will pull your changes into develop, and then on release day, everything including your changes will be pulled into master.


March 14, 2012 05:44 PM

March 10, 2012

Scott Downe

Popcorn.js 1.2 new features

A lot of new features landed in this release.

In no particular order:

1. Players have a _teardown function a lot like a plugin. Example:

Popcorn.player( "youtube", {
  _setup: function( options ) {},
  _teardown: function( options ) {}
});

So _setup is called when a new youtube player is created by doing Popcorn.youtube( “id”, “url” ), now _teardown will be called when destroy is called on the created player by doing p.destroy(). All track events and event listeners are cleaned before the _teardown, the idea it to just reverse what you did in _setup.

2. Popcorn.smart is a new function that tries to find the appropriate player for you. Example:

Popcorn.smart( "id", "url" );

Pretty simple, but if id is a video element, and url a valid HTML5 media, a regular old HTML5 video will be setup with popcorn. If the id is a div element, and the url a youtube, it will instead setup a youtube player.

3. Popcorn _canPlayType is a new player feature that is used by Popcorn.smart.

When you create a player, you can define a canPlayType function. Example:

Popcorn.player( "youtube", {
  _setup: function( options ) {},
  _canPlayType: function( nodeName, url ) {}
})

The _canPlayType accepts a node name that the player should be playable on. This is usually a html element, and a url, which is the url to the media to be loaded into the node. This function then return true if it can play, false otherwise. If this function does not exist on a player, undefined is returned instead.

To call this function, you do this Popcorn.youtube.canPlayType( “div”, “youtubeurl” );

4. Track event toString functions. Now, once you have a reference to a track event, you can call toString on it. This will return a string of the default data on any track event, usually the start, end and target. You can also add a toString method to the plugin when the plugin is being written, to better handle what to do with non default data. Example:

  Popcorn.plugin( "something" , {
    _setup: function( options ) {
      options.toString = function(){
        return options.start + ", " + options.end + ": " + options.foo;
    },
    start: function( event, options ){
    },
    end: function( event, options ){
    },
    _teardown: function( options ) {
    }
  });

5. We have moved players parsers and locale out of the core, and into modules. You include them much like you include a plugin, and from there on in, everything else is the same. Example:

<script src="popcorn.js"></script>
<script src="popcorn.player.js"></script>
<script src="popcorn.youtube.js"></script>
<script src="popcorn.subtitle.js"></script>

<script>
Popcorn( function() {

  Popcorn.youtube( "id", "url" ).subtitle({
    start: 10,
    end: 20,
    text: "hello world"
  });
});
</script>

6. We now have a shim to support ie8. This is only supported for the youtube player. Some plugins do work, like subtitle and footnote, but that was just a coincidence, and not something we are testing for, yet. We will improve our support for this over time. To include the shim, you have to include it before you include popcorn, like so:

<script src="popcorn.ie8.js"></script>
<script src="popcorn.js"></script>
<script src="popcorn.player.js"></script>
<script src="popcorn.youtube.js"></script>

7. All our plugins have had their manifests updated to supply options flags. This is useful for programmatically reading plugins dynamically. If someone uploads a plugin, and a program reads it in, it may want to know this information regarding options and mandatory data. Popcorn-maker is going to be using this soon. The idea will be when you click a track event to edit it, these will be a collapsible container with all the optional options. This makes a new plugin far less overwhelming, and easier to get at the important data quickly.

8. You can now supply events into a custom players option object. This is useful for listening to things that can happen during the creation process of the player. Example:

Popcorn.youtube( "id", "url", {
  events: {
    "error": function( e ) {}
  }
})

The error function will be called if for whatever reason, the player did not setup properly. This is also useful for knowing if popcorn.smart failed. Example:

Popcorn.smart( "invalidid", "nonsenseurl", {
  events: {
    "error": function( e ) {}
  }
})

So, the above id and url do not match any players, and is not a valid HTML5 media, the error function will be called. You can also put any other event in here, like canplaythrough, loadeddata, play, etc.


March 10, 2012 07:29 PM

February 13, 2012

Brett Gaylor

Popcorn and Documentary

In this post I explore how Popcorn follows the tradition of technology influencing the form of documentary. This post was created with Popcorn Maker.

February 13, 2012 09:53 PM

February 10, 2012

Scott Downe

Popcorn.js down the dark path of IE8 support

What I mean by support is that it will be possible, but it will be a “Your mileage may vary” situation. We’ll make it possible, and show how to do it, but we won’t officially support it or test against it. It will be a separate entity that the Popcorn code does not care about.

This is due to increasing demand for Popcorn.js to reach more audiences, and while I do believe this is a dark road, and one that detrimental to the fight to kill IE8, I also find it a unique challenge…

Personally, I believe the numbers in IE8’s market share to be inflated, and not really accurate. It is the enterprise environment that refuses to upgrade to the next version, and not the home user. I would say for each home computer, there is one or more users. And, for each enterprise install, there are three more sitting in the office next to it that are only used once a week. I know this, because we have a bunch of dead offices in our building, probably with Windows XP and IE8. So now this person can view Popcorn on Fox’s website one day a week, instead of doing work…

Anyway, we found a way to have our cake and eat it to.

First, we’re pulling players out of core, and into a module. We are doing this as players are mainly for youtube support, which is flash, which works on IE8. So by pulling it out, we can make the player module 100% support IE8. Then, we are going to create a shim, that when included before a clean popcorn.js file, will make it dirty. So now you include your shim, popcorn, and attach the player module, and you’re good to go. I also considered simply including the shim inside the player module, as without the player module, the shim is pretty pointless, but I am not sold on this yet; need more discussion.

Another note. This will not mean each and every one of our plugins will support IE8. Some might, some might not. But, plugins can be modified and created with IE8 in mind, and that is the idea of a plugin anyway.


February 10, 2012 01:23 AM

February 08, 2012

Brett Gaylor

Mozilla Popcorn aka The Meme Generating Machine

meme ( /ˈmiːm/) “an idea, behavior or style that spreads from person to person within a culture.”

“A meme is an idea that behaves like a virus–that moves through a population, taking hold in each person it infects.” - Malcolm Gladwell"

We need Mozilla Popcorn to become a virus.

Hear us out here.

In our early iterations of Popcorn Maker, we’ve been tackling the problem of how to make it easy for non-programmers to create Popcorn experiences. It remains the central focus of the project, and we’ve fleshed out our User Stories to imagine the full experience that a user might have. Ben has described these stories in a recent blog post.

During our Popcorn Maker sprint, we put a lot of thought into imagining how our users’ creations will get shared and disseminated on the web. Ben has blogged about how Popcorn.js is a gateway drug to learning JavaScript (Also of the good sort. Stay with us). Similarly, we want Popcorn Maker to be a tool for injecting the Maker meme onto the web.

Fork my meme

To do this, we’ll need to do a few things. First, we need to make it easy for Popcorn makers to embed their creations on their own blogs, Tumblrs and websites. This means offering <iframe>embeds.

More interestingly, we want to give viewers the ability to fork others’ Popcorn productions. If you’ve watched Jonathan MacIntosh’s Buffy Vs Edward pop-up video remix, for example, wouldn’t you love the ability to easily clone his creation and add to it?

Each Popcorn creation needs a post-roll that offers viewers the ability to 1) Replay, 2) Share and embed, and 3) Fork this creation.

Popcorn Gallery

To build WordPress-like community scaffolding, we need the ability for every single creation to be made available in the Popcorn Gallery. When users choose to [Share] from Popcorn Maker they have an option to share to the Gallery that is checked by default. While the Gallery will favour our default templates, it will become a jumping off point for new creators to get started with Popcorn. It will solidify the notion that creating on the web is generative. The act of creation will start by building on someone else’s work.

We think Popcorn will be a good bug to catch. Like getting the chicken pox when you were a kid. Or maybe more like taking an interest in photography. We’re sure this is the right metaphor. Note: knock knock jokes, box stores and lolcats were all considered as alternatives while titling this post. Go meme or go home.

February 08, 2012 05:28 AM

January 14, 2012

Scott Downe

Popcorn.js xray goggles plugin.

On and off this week I have been fruitfully fumbling my way around the Hackasaurus xray goggles bookmarklet, in an attempt to use them in a popcorn plugin, while other things brew.

A tl;dr demo.

The idea is to execute the goggles between a time range, on an element defined by popcorn’s data. In the case of the above demo, I used the video element for testing purposes.

Right now, it is in a demoing state, demoing the use of the goggles at a time range. It is not really in a practical usable state, as you cannot close the goggles, nor can you control the video as they are up; quite frustrating.

I am going to allow popcorn’s data decide what to do with the timing. It can either leave the video playing, pause the video for a set number of seconds, or simply leave the video paused until the user closes and hits play again.

I also need to re add some animation that I avoided for sake of getting it working. Doing this will be good practice for me, because I’ve never been much of a front end guy, but I have the artistic abilities that I just need to dust off.

The hardest part of this was using HTML5’s postMessage. I have never used it before, and was stuck for longer than I would of liked, but long enough to build character. I was attempting to send a postMessage to an iframe before the iframe was done loading, thus the iframe’s event listener was not yet defined, thus my postMessage fell on deaf ears.


January 14, 2012 05:44 AM

January 12, 2012

Scott Downe

Firefox media fragement tickets

So, to follow through with my last post, I have done some more research and have three potential bugs.

First, It turns out media fragment is already done, which is exciting because now we can use it in Popcorn.

Second, three bugs were blocked by it, which can now be done: [498253 677121 677122].

Reading bug 498253, and it seems as of second quarter of last year, there were still on going spec changes.

677121 still interests me.

And, 677122 seems straight forward enough. A bug where it seems it is caching the media fragment start time, and a refresh is required to update the time. The steps to reproduce right from the bug:

1) Open http://www.bluishcoder.co.nz/mediafrag/AudioAPI.webm#t=50,100
2) Change the fragment portion to be “#t=30.100″ and press enter

Expected Results:

1) Start and End fragment of the video would be the new position of 30 and 100 respectively.

Actual Results:

1) The video does not change the start/end fragments. They stay at 50 and 100.

This one is still a good candidate.


January 12, 2012 07:47 PM

OSD700 and back to school

Today I had my first day back to school, and first day back in Dave’s open source class.

I’m currently working at CDOT with Dave still, which means I will still be working on Popcorn and Popcorn-Maker. But, for his class, I will need to do more work for him, but it cannot be CDOT work. It makes sense to me that I find Firefox bugs involving video spec, that way I can leverage these new tools into popcorn and popcorn-maker use.

So let’s look at bugzilla.

I made a general search under “media”. I wasn’t expecting anything to jump out, just wanted to see what I was dealing with. But, something did jump out at me.

Now, this ticket might not be the starting point for my work, but it is definitely something I am interested in.

The general interest is media fragments. Which the above bug relates to, but does not mean I am not doing the above bug. More research is required.

I also have interest in general media spec bugs, and I’ll look for more to have some concrete bugs tomorrow night.


January 12, 2012 06:00 PM

November 13, 2011

Scott Downe

Popcorn.js has a new brother… Popcorn-Hacker

Anyone familiar with Popcorn.js, Popcorn-Maker, and bookmarklets checkout my demo.

A bookmarklet is JavaScript that runs via the address bar. So, you can fill a link element in a webpage to instead run code. Click the link, runs the code. You can also drag said link into your bookmarks for later, and continual use.

What I’ve done is created a bookmarklet that lets you view and edit any popcorn.js page real time.

There are a few caveats. 1. It cannot be done on any version of Popcorn before 0.4, because I need access to Popcorn.instances, but that doesn’t matter because it also needs p.media, which was introduced in 0.5. I also ended up using Popcorn.getScript, which is another dependency, but getScript is introduced before 0.5, so if we have instances and media, we’ll have getScript. 2. We need plugins with complete manifests. Manifests are like meta-data for plugins. It tells me what to expect, thus what I can enter into the form fields. Without a manifest, it is read only Popcorn. 3. Demos made from exec alone will not work. Exec isn’t really editable without writing JavaScript anyway.

Now that the academic parts of the post are out of the way, I shall ramble about my thoughts on the project. This thing, to me, is a good example of a hack. I took parts of code from one thing, and remixed them together to do something different. I had little regard for how it looked, just that it worked. So, I guess it is more of a proof of concept. I really want to take it to the next level, though. Give it an export of some sort, and more closely tie it in to Popcorn-Maker’s build tools. Other-wise, this is essentially a fork of Popcorn-Maker. Over time, it will be too different, and become a separate entity that needs to be maintained separately. In order to avoid this, we would have to do some changes to Popcorn-Maker. It has some flaws, things I had to hack around. One of the good things was Popcorn-Makers event system. Made it easy to tie in my new functionality without having to worry about what was happening in other parts. Something interesting I noticed doing this, Popcron-Maker is close to 40k lines of code. This includes HTML, CSS and remote scripts like JQuery. Still though, that’s a lot of lines.

A few good pages to try it on are: Popcorn homepage, The demo from this fantastic tutorial on Popcorn itself, and the initial semantic video demo from way back in 0.1 of popcorn. It’ll work on others, but there is code in the wild it will not work on, yet. I’m going to deploy the “fix it for one demo at a time” technique I learned doing work in Processing.js. It’s great to have user generated content to test off of!

Now for an abrupt end to this post.


November 13, 2011 03:47 AM

November 06, 2011

Scott Downe

Popcorn.js 1.0, mozfest, Popcorn.js Universal Subtitles parser

This weekend has been a blast.

Yesterday Toronto time we released Popcorn.js 1.0 in London time.. or yesterday, I’m not sure, but anyway, it was super cool. We released with new docs made by David Seifried, a Mozilla based website for what Mozilla is doing with Popcorn, and a shiny new build tool, built by Chris De Cairos.

I’ve been spending the weekend in London at the Mozilla Festival. Been getting way more Popcorn attention than I expected or imagined! Been interesting hearing impressions and educating people on Popcorn.

I also spent some time at the festival hacking up a Popcorn.js Universal Subtitles parser, and demo. I have one work in here before. Back in 0.1 I did a internal parser for Universal Subtitles, and for a beta version of Popcorn-Maker, I implemented a parser for Universal Subtitles as well. This one though, should be the final, as it’s not longer living inside something, but lives on it’s own in modular space. I also decided to take some time to make it look nice with Brian Chirls’ pop plugin! Check it out!


November 06, 2011 01:50 AM

October 21, 2011

Scott Downe

Thoughts on Popcorn.js hackathon in San Francisco

Last week I brought my JavaScript knowledge and experience to an event that put JavaScript developers and filmmakers in the same room for two days. The idea was to produce something. There were six JavaScript developers, and six films with 2-4 filmmakers per film. There were also designers patrolling the grounds, helping out. I cannot stress enough how important they were. Design really does help bring out the essence of a project, like spice in food. Flavour enhancers. Doesn’t matter how good, right, or fast a program is, if it looks bad, it will, by definition, still look bad. Not only was each group was able to produce something cool, but each produced something unique.

Wired has an article about the event, so check it out.

The actual event went down like this. Breakfast and mingling for about an hour, while everyone arrives. Then we all had a meet and greet. By 10:00 (if my memory serves me) we broke off into groups. So there I was with a group of people I never met, a film I have never seen, and a clock ticking. By lunch we had specced out what we were going to do. This is always an interesting process. You have a developer that knows nothing about the project or how things should be done, and you have designers and filmmakers that don’t know what can and cannot be done or how to measure how long something will take to develop. The problem for developers is “the easiest thing isn’t always the coolest” and for filmmakers and designers “the time it takes to develop something has nothing to do with how cool it is”. The developers don’t know what should be solved, and the fimmakers don’t know what can be solved. I think the solution is for the filmmaker and designer is to start with a big vision, then to have a back and forth discussion. It really is about communication and an open mind. Developers don’t be scared if filmmakers want it all. Filmmakers, don’t be scared to want it all. Developers don’t be scared to say no. Filmmakers don’t be scared to be told no :P. Eventually you will come to something that is “quick to cool”. Then it is lunch time.

After lunch you have to start developing. At this point huge changes to the spec can be frustrating, but still, no harm in asking. You never know, that thing you want changed might actually be easier! so keep up the communication. The rest of the day I struggled with getting Facebook’s API to work, but I did. It was an unstyled, nonsensical, boring piece of what I do best :D.

The next day we got to putting in the design and data. These are two things you need to figure out in the first half of the first day, and if possible have the data ready before the end of the first day. I kept the design pretty clean, empty, but clean, so it was quite easy to plug in some css and add some images. This is where you need the designer again. So, designer during spec phase, not after, and designer during pull it all together phase, not before. Then it’s just a matter of testing and debugging, and it’s still ok to request changes, just understand it might not happen.

Communication was key. Filmmakers teaching developers, and developers teaching filmmakers. I feel like designers have already crossed this bridge.


October 21, 2011 12:35 AM

August 24, 2011

Scott Downe

Popcorn.js player plugin revisit

I’m about to revisit Popcorn.js players. Right now we have 4 players, youtube, vimeo, soundcloud and baseplayer. All hacked up in their own way, and a maintenance nightmare. I intend to make basplayer something the other players derive from. This will reduce code surface, thus reducing bugs, keep things from getting fragmented and out of sync, and most importantly, test functionality once, reducing our testing phase and bugs in our test suites.

I’m thinking we break the current API regarding players with this patch, I think it’ll be worth it.

I think baseplayer will exist internally (it won’t be callable), and when you call:

Popcorn.player( "youtube" {});

it will create an instance of baseplayer, you can then pass in the additional features. So, if someone wants to use baseplayer without any additions, they can simply do this:

Popcorn.player( "baseplayer", {});

That will create a player emulating an HTML5 video players API that can then work in Popcorn, like this:

var p = Popcorn.baseplayer();

It will not actually display anything, but things like play, pause, currentTime will work and fire events.

To create a player, the idea is to add the needed functionality to make it work, and the Popcorn.player initialization code will look something like this:

Popcorn.player( "youtube", {
  setup: ( options ) {}, // creates the element and handles its ready state
  play: function( options ) {}, // simply start the setup element's play 
  pause: function( options ) {},
  currentTime: functipon( options ) {}, 
});

I am hoping in most cases, this is all we will need. So the internals of firing events can be handled in internal baseplayer code, because we can be smart enough to tell the overloaded play and currentTime to fire popcorn’s timeupdate.

This is all to setup a player plugin. From here, a user can then use it by doing this:

var p = Popcorn.youtube( "targetDiv", url );

The actual breakage of the API is minimal. The old way is below, the new above:

var p = Popcorn( Popcorn.youtube( "targetDiv", url ));

Positioning related code of the element will be setup as well. Not sure yet how that’ll look, but I do know the internal baseplayer won’t have a position, but it will have functions to manipulate the position, and probably have the position code look inside the element created by the setup function for the position related code.

I suspect there will be other issues while I work on this, but I’ll cross those bridges as I get to them, so I need to stay flexible to reduce the rage.


August 24, 2011 05:56 PM

April 02, 2011

Brett Gaylor

Video: What is Mozilla?

I’ve been working on and off for many months on a video to explain Mozilla to the uninitiated. The home for the video is now on the Get Involved page of the mozilla.org site, and I’m excited that it will be part of a process for getting people excited about pitching in at Mozilla. You can watch it below: mega hats off to Rainer Cvillink, Mozilla’s in-house video wizard, for all the great camera work, and to Jenn Strom for editing and motion grapnics.

April 02, 2011 10:29 PM

March 30, 2011

Brett Gaylor

Videoblog: Buttercamp

Everyone is still recovering a bit from Buttercamp. Anna Sobiepanek beat us all to it with a great recap of the event, but let me say how thankful I am for the extraordinary effort the participants put into the day. We learned a lot about how to do events like these, and definitely left wanting to do more.

As Anna mentioned in her blog, our biggest lessons were a) the need for designers to be present, and b) that we should probably do these over two days. Scott Downe benefited from teaming with Zach Liberman, and mentioned that 2 developers are crucial for a team, so that if one struggles with a blocker, the other can forge ahead. Well noted.

Demos:

Note: these demos will all require a modern browser, may not work for you at all, and are the product of one day’s work.
GML + Popcorn:

http://scotland.proximity.on.ca/sdowne/popcornGML/gml+popcorn/
Integrating the Graffiti Markup Language (GML) XML standard with timed popcorn events.

Robots:
An experiment with “node” style decision forking using popcorn
http://robothaus.org/robots/

#18daysinEgypt:
To have popcorn events appear in specific locations on a full screen video, Brian Chirls wrote a popup video plugin. Video events that appear cause the main video to lower volume and loop.
http://code.chirls.com/buttercamp/

Digital Diaspora Road Show:
Accompanying the feature documentary Through A Lens Darkly, filmmaker Thomas Allen Harris creates “Roadshows” were participants explore how photography connects them to their heritage. This demo made extensive use of the Butter application, and to facilitate multiple editors, Boaz Sender added import/export functionality to the edge version of Butter.
http://dev.webmademovies.org/lensdarkly/
note: this demo does not work in Firefox due to mp4 only source.

Kapor Center Mural Unveiling
Trevor Parham used Butter initially for data entry, but then decided to focus on CSS and layout to create this compelling use case for popcorn: an annotated version of a recent event at the Kapor Center.
http://kaporcenter.org/files/video/

TubeyLoops
A modified version of PatternSketch, which controls videos via popcorn to create a video remix machine.
http://www.tubeyloops.com/tubeyloops/
note: use keyboard keys Q W E R to control video.

In addition to these demos, other plugins, connections, and starts of new projects were forged. Thanks to ITP, the Center for Development of Open Technology, Bocoup and Eyebeam for helping facilitate this meeting of great minds.

Buttercamp was:

Michael McCarthy Henrik Moltke Yasmin Elayat Kirby Ferguson Peter Asaro Peter Kaufman Ann Bennet Thomas Allen Harris Woo Cho Anna Sobiepanek Baowen Huang Ben Moskowitz Boaz Sender Bobby Richter Brett Gaylor Brian Chirls Elad Schanin Fred Truman Greg Dorsainville Ingrid Kopp Jeff Howard Jeremy Diamond Jonathan McIntosh Matt Thompson Rick Waldron Scott Downe Todd Carter Trevor Parham Yujin Yi Zachary Leiberman

March 30, 2011 10:49 PM

March 24, 2011

Brett Gaylor

Welcome Bobby Richter

I’m very happy to announce that Bobby Richter is joining the Web Made Movies team as Creative Technical Lead. Already a Mozilla contributor, having worked with the #audio team on a variety of demos and libraries, Bobby is joining us to, as he writes on his about page, “make Web Made Movie’s ideas tangible as quick as possible”. Bobby’s job will be diverse: contributing to the popcorn.js community, advancing the Butter platform, and helping to create magnetic productions as outlined in our 2011 goals.

Bobby brings a range of experience – from helping to create the NFB’s award winning Out My Window, to a stint at Electronic Arts, Bobby has both skill and experience that all of us on the media team are thrilled to have among our nascent group.

During our recruiting conversations, I was particularly excited about his experience with WebGL, and these discussions manifested themselves in a demo. Please check it out here – its an early peek at integration WebGL and Popcorn, via an homage to Mozilla’s JavaScript jedi master Brendan Eich.

Say hello to Bobby over at his blog, and you can find him on irc.mozilla.org in the #popcorn channel as “richter”, or sometimes under has super hero name, secretrobotron. Welcome, Bobby!

March 24, 2011 07:14 PM

March 01, 2011

Brett Gaylor

Butter screencast

As a part of our webmademovies.org relaunch, I thought I’d create a screencast of Butter, the authoring environment for popcorn.js. What do you think?

March 01, 2011 09:28 PM

February 26, 2011

Brett Gaylor

Web Made Movies at BAVC

Two things I learned this week:

1) Exercise caution when giving 12 high school students access to an etherpad that is projected against a wall

2) The Bay Area Coalition (BAVC)’s Factory program for youth is srs bizness

Mozilla has partnered up with the Bay Area Video Coalition and Zero Divide to implement the technologies coming out of Web Made Movies into the current curriculum of The Factory, a video collective for motivated youth in the Bay.

Ben Moskowitz and I came to meet members of the collective, and were joined by our Mozilla colleagues Atul Varna and Lukas Blakk. Lukas had recently been working with teenage girls at the Dare 2 B Digital Conference, addressing the gender gap in computer science, and Atul has been working on the Hackasaurus project with Drumbeat, a set of tools to encourage kids to hack the web. The 2 days at BAVC were for us a way to test some of our thinking about “web literacy”, to test the Butter authoring tool, and to meet the youth at BAVC. We were hoping that they’d understand what we were banging on about after the two days and would be inspired to bring a hacker ethic to their projects.

Our first excercise was to wake the HACKASAURUS. Everyone checked out the X-Ray Goggles, a fantastic tool that lets you see how a web page is put together, and modify elements of it. Paired with HTMLpad.org, which renders HTML typed into an Etherpad of the same name (try it - its awesome), the Hackasaurus tools teach the user that the web really is made up of many simple parts. To help visualize things, students printed out their favourite websites, cut them up, pasted them back together, and re-created their cutups in HTML. Its a great basis on which to start playing with popcorn.js - it puts one in the mindspace to consider “how can I hack this video?”. IMG_9852.jpg IMG_9861.jpg

Fortunately, our friends at Bocoup had pushed some last minute changes to Butter, the authoring tool for popcorn, and it was ready enough to be tested by the group. We loaded up one of their productions from last year, “The List”, which was a dramatization of the military recruitment that happens when students take standardized tests. There was a lot of factual information in the video, so it was a perfect test bed for popcorn.

IMG_9870.jpg
IMG_9875.jpg

The students formed groups and each took a section of The List and pulled it into Butter. They added semantic data, some hacked with Ben a method for displaying images on top of the frame, others linked to an HTML page that let users opt-out of recruitment, others brought in photos from flickr, articles from Wikipedia and maps of their school on Google Maps. Lukas wrote a quick script that would chain the videos together, and then we had a screening at the last minute!

IMG_9889.jpg
IMG_9886.jpg

You can watch the completed movies here - keep in mind these were created in two hours by a group that had never written any HTML, so we were well impressed.

One of the great things that came out of the workshop was a huge list of bugs for popcorn and butter created by the students that we can now bring back to the development community. We’re looking forward to coming back in April and working with The Factory through till the fall! IMG_9879.jpg IMG_9904.jpg

February 26, 2011 05:41 PM

February 17, 2011

Brett Gaylor

Web Made Movies 2011

Along with my other colleagues at Mozilla, I’ve been doing a lot of work lately thinking about what the rest of 2011 holds. It’s been great to read posts by Ben Moskowitz, Phillip Smith and Nathaniel James as they describe and forecast their work on the Knight/Mozilla Technology Partnership. It’s painting a great picture of Mozilla’s commitment to transforming media and journalism - I thought I’d share my plans as well in the video above.

February 17, 2011 06:49 PM

January 31, 2011

Brett Gaylor

Yes we did!

This past week, I was fortunate to be part of a great collaboration between Mozilla and the PBS Newshour team, creating an annotated version of Barack Obama’s State of The Union Speech using popcorn.js. While the demo itself is fairly humble, its actually quite an accomplishment given that we had only met the Newsroom staff the day of the speech during a meeting at the Corporation For Public Broadcasting. I think the Newshour team experienced the power of the open web first hand - a talented group of developers were able to collaborate quickly and produce something of high quality (not unlike a tv newsroom). So much so that we’ve begun a conversation on PBS to use popcorn.js in all of their future analysis.

The whole experience was a great example of the kind of innovation that we’re trying to foster with Web Made Movies: video producers come up with new use cases for technology , and the resulting code is put in a repository for future use. It’s proof that HTML5 video is a great space to be exploring.

David Humphrey and PBS Newshour recently blogged about their experiences. I thought I’d provide a blow by blow.

January 25th, 2011
Washington, DC: Ben Moskowitz, Nicholas Reville, Geoffrey MacDougall and myself are pacing around a presentation room at the Corporation for Public Broadcasting. We’ve come to express why we think there is natural alignment between public media and the open web.

10:00
A little bleary from travel, a previous day of meetings, and bad breakfast joint coffee, we meet a room full of people involved in American public media - PBS affiliate stations, the PBS Newshour team, National Public Radio, and others.

We had created some demos over the previous 2 weeks - including this popcorn treatment of a PBS Newshour piece on Hait (only the first several minutes are annotated). We also experimented with the WGBH Open Vault, creating a parser for their metadata schema that would translate into popcorn data (due to mp4 video, works only in webkit browsers. Ben and his cousin created this example video report, based on lesson plans in the PBS Newshour piece on Haiti. Nicholas at PCF also showed the results of a translation party that Universal Subtitles had hosted with PBS Newshour.

We felt the presentation went well - the room was definitely thinking about the possibilities present in popcorn, and immediately grasped the advantage of adopting Universal Subtitles.

11:30
After the speech, PBS Newshour correspondent Hari Sreenivasan remarked how they wished they had it for the State of The Union address. “Isn’t that tonight? Someone asked” Hari nods. A wireframe is sketched out.

3:00
We’re with Travis Daub, the Newshour’s digital producer. He’s on the phone getting the run down on when the video of the president’s speech will be on Youtube. He says midnight, and analysis will come in throughout the evening These news people stay up all night, too!

We hop on the popcorn irc channel (link). I ask David Humphrey at CDOT if he is up for bringing popcorn.js to the State of The Union. He laughs, of course he is. He asks if Anna Sobiepanek and Scott Downe who are co-op students at Seneca if they are in - you bet. Rick Waldron, a javascript ninja at Bocoup picks up on what is happening and starts writing code immediately based on the spec. Ben Moskowitz and I rush to keep up, posting wireframes, and communicating with Dean Jensen at PCF / Universal Subtitles who is co-ordinating the transcript that will be instumental in timing the analysis. Travis logs into IRC from his iphone in a cab.

7:00
Robert Bole for the Corporation for Public Broadcasting orders some Chinese food.

9:00
75% of the code necessary to convert PBS’ annotation system to popcorn. The wireframes are posted. Its gonna pull in twitter, have chapter selectors, wash your car, and email Obama. This is going to be easy. Lets watch the speech.

10:30
Travis starts uploading the video.

11:00
Snag. The encoded video doesn’t have audio. Travis will have to start again, and do it twice for browser compatability. Ouch. The video is so long that the encoding process is painful.

11:15
New snag. Servers seem to be failing.

1:00
Multiple snags. Grumpiness sets in. Travis valiantly posting new versions. Popcorn hackers have the analysis working with a dummy video - just waiting for the pieces to come together.

3:00
The pieces are not coming together. The night is called.

The next day
A snow storm, a train travel, multiple taxis and subways, a hamburger at a breakfast spot - next thing you know its midnight again. Is it working yet? No, it is not. Inconsistencies in the transcript. Hotel Wifi killing us. Must sleep.

With a final push, and additional work in the morning, the bugs are ironed out. Vanessa Dennis at PBS Newshour adds styling and pushes to their blog on the front page. My favourite quote from theirblog:

“The Web is changing, and we at the PBS Newshour are changing with it through experiments like these.”

Experiments like these can be exhausting, but the thing I love about working with Mozilla is that we make change by building things. It feels great that Web Made Movies is really starting to accomplish this.

January 31, 2011 06:02 AM

December 10, 2010

Brett Gaylor

Putting some Butter on Popcorn!

I’m very excited! I was just sent some very cool wireframes from Al Macdonald (aka F1LT3R), developer extraordinaire at Bocoup. He and others at the Boston-based Javascript house are in full stride working on the next release of popcorn.js and the first release of the Graphical User Interface for developing popcorn pages that we like to call Butter.

The goal for butter is that anyone with a video anywhere on the web can build HTML5 video pages that incorporate other elements of the web – allowing non-developers to create what my fellow Mozillian Tristan Nitot has dubbed “Hypervideo”.

In the new version of popcorn (its only version 0.2, so still a ways to go), we are moving all of the functionality from the previous version into plugins. This is a timely step towards a more open infrastructure that will allow any developer to write a plugin that will work with popcorn.js, and then by extension, Butter. So while the first plugins we have developed are for popular sites and services such as twitter, flickr and wikipedia, now anyone can create a plugin to support identica, open street maps, or whatever new thing the web churns out tomorrow. We have big plans for butter, and as we progress towards a 1.0 release in 2011 there will be much more functionality.

Check out our evolving project scope on our etherpad.

We have a goal for popcorn to be part of an open media ecosystem – a great web app and development platform that creators can add to the growing list of HTML5 tools that are available to them. We’ve been very inspired by projects like processing.js and Universal Subtitles that illustrate the advantages of federated and collaborative systems for creating culture that is truly OF the web. We are very early in that process and of course could use all the help we can get!

One of our next goals is to make it more clear how contributors can get involved – the best page for this is at www.webmademovies.org, where you can join our mailing list, talk in IRC or pick up a bug on our Lighthouse issue tracker.

On a personal note, this has been a great learning experience for me, as I’ve seen the power of the open web play out in realtime – a seed of an idea (what if a video could trigger events in a web page?) gets a proof of concept demo, which is turned into a library, which is now being turned into a product that we hope a lot of people will get behind. It’s been inspiring to see students from Seneca College working side by side with seasoned professionals towards a goal that will benefit the web, and makes me happy to be part of Mozilla.

Please stay tuned, and also check out Bocoup’s post on the subject, as well as Scott Downe’s recap of the experience from his end at Seneca, as well as Anna Sobiepanek’s thoughts on the refactoring for 0.2. We’re planning a release just in time for Christmas!

December 10, 2010 07:24 PM

November 18, 2010

Brett Gaylor

Drumbeat: A Forcing Function

Last week, in collaboration with David Humphrey, I ran the Video Lab at the Mozilla Drumbeat festival in Barcelona. I’m still recovering, so this post is a bit late, but a week has actually given me some perspective on why events like this are necessary crucibles for innovation.

IMG_8877.jpg

Everything we’ve achieved so far within the Web Made Movies project has been the result of intense collaboration over a short period of time. The popcorn.js library was created in a span of only two weeks, with half of this time devoted to creating our first demo (screen capture embedded below).

The forcing function of this demo was the Mozilla Summit - a gathering of the entire Mozilla community in Whistler, BC. It really opened my eyes to the degree to which demos drive the developer community - showing our demo at the summit was the moment we moved from “hand waving arty types” to “people actually trying to do something” in the eyes of the developers in the room. This will be crucial as we begin to move from “demo or die” mode towards shipping software.

Our next event was the Open Video Conference in New York. In the run up to this event, we knew that we were meeting with folks from the Public Broadcasting community in the US, so we wanted to show how open video technologies have a competitive advantage in that they can be quickly iterated upon. So Scott Downe and Anna Sobiepanek created two quick demos - one of a test integration between popcorn.js and Universal Subtitles (video below), and Lev Feels Fine, a an experiment in data-driven narrative.

In the run up to the Barcelona event, we knew we needed to think about how the open video tools we were developing could be used in education. I knew that Mark Surman’s son Tristan made video tutorials for video games, so I asked him and Mark for a “video book report” around a novel he was currently reading, and then we layered popcorn.js on top of his video - see the results. It was a great penny-drop for many people, illustrating how the web could be a canvas for students to create their own multi-media essays and reports.

When David and I arrived in Barcelona, we knew we’d have to show something on the first day to get people thinking. So we recorded some video of the people who we’d shared a “space wranglers” meeting with in Plaza del Ángel and asked them where they were from. David went back to his hotel to recover from jet lag, but hacked together a demo that mashed the video with Google Maps and Wikipedia (video version below).

Popcorn.js Demo: Google Maps API and Wikipedia from David Humphrey on Vimeo.

Our mission was to create something while in Barcelona - a lofty goal for these types of events, and one that depended on a delicate mix of developers, filmmakers, designers and educators showing up. As luck would have it, they did!

Over our first day we had an overview of HTML5 video technologies, and split into several breakout groups to brainstorm what we could build in our second day. We also had a visit from Aza Raskin, the creative lead for Firefox at the Mozilla Corporation, who did a talk he called “How to prototype and influence people”. It was fun and drew a pretty big crowd. The talk is below, and was picked up by BoingBoing after the conference, which was fun.

Rapid Prototyping with Aza Raskin from Dan Braghis on Vimeo.

So after some facilitation, it was decided that we would work on two projects: A meta-data demo that overlays Dublin Core data on to videos (requires Firefox 4 beta or nighties), the creation of which was certainly influenced by the fact that so many librarians and academics at the conference were expressing the lack of tools like this.

Our second creation was a short web made movie exploring the Future Of Education. The video was shot before lunch, edited, then layered with the twitter hashtag #futureofeducation (which didn’t exist the day before), and javcascript and css was hacked to overlay images from the evolving #drumbeat flickr hashtag. It isn’t exactly what everyone imagined (when does that ever happen anyway?), but remains a great outcome and a compelling piece of content by any standard.

Drumbeat “Future of Education” Demo from David Humphrey on Vimeo.

I know both projects will continue to be improved by this talented group that came together to hack, create, play and collaborate.

And as far as forcing functions, for me it has reinforced a need to improve the popcorn.js library, to create documentation, more demos, better code, to not loose sight of the artistic component of our project, and to have more events like these. The event has encouraged me to publish more, to find new collaborators, to advance the state of Open Source Cinema, to develop new forms and new languages, and to follow through on the promise of Web Made Movies - to bring developers and filmmakers together in a collaborative environment. Stay tuned for our next forcing function: 2011.

November 18, 2010 07:19 PM

October 09, 2010

Brett Gaylor

Lev Feels Fine demo is live

Thanks to the efforts of Anna Sobiepanek and Scott Downe, I’m happy to invite you to try out the latest experiment from Web Made Movies. As outlined in an earlier post, we wanted to pay homage to both the Kuleshov Effect and We Feel Fine. This demo is an experiment in merging the traditions of cinema with the emerging ideas of the web.

Of course, we know that this demo by itself has limited emotional and narrative impact - but as with everything in the Web Made Movies project, our idea is to experiment at the fringes, hoping that other filmmakers and developers will both build on our work, but also bring their own projects and ideas into our lab-in-progress. Please do contact us if this sparks an idea that you would like to pursue. We’re open :)

Visit the demo!

October 09, 2010 01:53 AM

October 08, 2010

Brett Gaylor

Universal Subtitles + popcorn.js integration

From early on in the popcorn.js process, we’ve been imagining BUTTER - an easy way for non-coders to be able to add metadata to their videos. Currently, popcorn.js uses an external XML file (though we’ll be switching to JSON in our next releases). Neither of these formats are reasonable for lay video creators to use, so discussion of a front end has been in the works for months.

However, looking at the amazing work done by the Participatory Culture Foundation on Universal Subtitles, we thought this interface would be great to experiment with, and so they were nice enough to add support for metadata in the language drop down on their staging site. Scott Downe and Adam Duston are responsible for this early work, which you can see a screencast of below.

October 08, 2010 05:50 AM

September 11, 2010

Brett Gaylor

Web Made Movies hack day at Open Video Conference!

As the Open Video Conference in New York draws closer (Oct 1-3), we’re excited to announce our hack day on Sunday October 3rd.

The Web Made Movies hack day is a chance for filmmakers, developers and anyone interested in creating Open Video to turn the inspiration of OVC into action.

Are you a videomaker?
Its a great opportunity to meet with people who can help you explore the potential of HTML5 video – for instance, applying the Popcorn.js video library to your videos to pull data from flickr, twitter, wikiPedia and Google Maps into your video experiences.

Are you a software developer?
Meet with the folks who have created the Popcorn.js library and brainstorm how to improve and expand its scope. Meet with like-minded developers who need help or have some to offer. Learn and teach.

Just curious?
We’ll be featuring a series of short talks and presentations that will spark your imagination and have you leaving the OVC weekend with some concrete next steps to apply to your future work. And we will have lots of coffee during, beer afterwards, and some pioneers of internet video hanging around.

If you’re interested in coming, it would be great if you could fill in a small google spreadsheet form – it will help us in designing the day and pairing up video creators with developers.

Find out more about Web Made Movies, Mozilla’s open video lab.

Details of the event: Sunday October 3rd, 10 am - 721 Broadway

View Larger Map

Please fill out this survey if you plan on attending!

September 11, 2010 01:40 AM

September 10, 2010

Brett Gaylor

Kuleshov Effect + We Feel Fine = Lev's all right?

Was discussing in the Web Made Movies IRC today with David Humphrey the need to create a new, and vastly different than our last, demo for the upcoming Open Video Conference.

We wanted to create something that presented a dynamically generated video based on who was watching, and that created different meaning from different juxtapositions of shots.

This reminded me of the Kuleshov effect - the famous experiment by Russian film theorist Lev Kuleshov, in which he proved that meaning was created in cinema through montage.

Kuleshov took a shot of a man staring at the camera, which was devoid of emotion. He then made 3 sequences where he spliced a bowl of soup, an attractive woman, and a child in a coffin, followed by a shot of the same man.

When showing the 3 sequences to audiences, he found that despite the expressionless face of the man, they perceived him to be hungry, lustful or sad, depending on which shot was placed in the middle. Thus, he declared, the meaning of individual shots and sequences was changed by whatever preceded or followed them. It was an extremely influential finding.

Seeing as Web Made Movies is about seeing what happens when we mix the traditions of cinema (time) and the traditions of the web (hypertext), Dave and I wanted to experiment with how this experiment would be different in the context of the web.

I though it would be fun to mash this experiment with the ethos of We Feel Fine, a human emotion experiment by Jonathan Harris and Sep Kamvar that presents web visitors with visualizations of the worlds’ emotions by gathering data from searches and blogs.

So I mocked up a wireframe that you can see below, and I’m looking for some feedback on how it could more meaningful riff of these two experiments. In the example below, the user is asked for their twitter account, as well as their location.

The demo would then build a unique sequence of 3 shots that would be tailored to the users emotions. The first image would be a shot of a face, staring similarly to Kuleshov’s actor, which would be either sad, happy or angry. Which emotion appeared on the actors face would be determined by how often the twitter user mentioned those emotions in their twitter stream of the last month (or so). The second image would be pulled from flickr - from a search of an emotion (you can see that interesting results, for instance, can be found be a flickr search of “sad”.

The third image would be the same as the first.

The music would be chosen from a sampling of 10 songs (or so) which would be categorized based on emotion. The chosen song would correspond to whatever the “world” was feeling, which would be transmitted from We Feel Fine’s API.

The background of the page playing the video would be influenced by the weather in the users location - if it was rainy, it would be dark, sunny would be bright, and so on. Potentially we could also throw in some weather effects via something like processing.js.

Finally, the user would be asked to categorize the emotion of the video. This would be added to a third page, which would provide a grouping of the emotions similar to the 9 elements demo (only works in FF 3.6, not FF4). Users can then preview the different videos that were generated for others.

So it doesn’t feel quite right yet, but we’re thinking we might start and see where it gets us. But could really use some feedback on how this experiment could feel more true and more, well, meaningful. The wireframe draft is below. Comments here most appreciated.

September 10, 2010 02:49 PM

September 09, 2010

Brett Gaylor

Web Made Movies vault

In creating our first demo for popcorn, we gathered footage from projects like Grassrootsmapping.org and The Village Telco to create the final video. However, we only used small snippets, so I took some time to edit down longer versions of each.

Grass Roots Mapping

The Village Telco

September 09, 2010 05:38 PM

September 08, 2010

Brett Gaylor

Not Found

The URL you requested could not be found.

September 08, 2010 07:20 PM

August 20, 2010

Tristan Nitot

Video+html5+Popcorn.js=hyper-video

You may have seen that Brett Gaylor is joining Mozilla (see also Mark Surman's post). For those who don't know Brett, he's particularly famous for his "Open Source documentary" Rip! A remix Manifesto[1].

One may ask why Mozilla has hired a film director[2], but it actually makes a lot of sense thanks to Mozilla Drumbeat, as Brett is working on a Drumbeat project called Web made movies.

Now Brett has been a Mozilla community member for quite some time, contributing with the good folks at CDOT / Seneca College to create popcorn.js, "a JavaScript library for merging video with semantic data". I understand that this is a bit of a mouthful, but don't close your browser window just yet! Popcorn.js is what I would describe as "hyper-video" ("hyper" as in "hypertext"): the ability to leverage data from the video and link to it, Web style. Such data include:

Screenshot of the demo

Go and see for yourself the PopCorn.js demo (in case you're stuck with an older browser that is not capable of running the demo, here is a video of the demo).

I think this is a very significant step further for video on the Web, which was until now a very TV-like, passive and linear approach, now merged with the hypertext nature of the Web (its ability to link to things in other places), so that users can click on links in order to learn more. Of course, this is just a demo. Tons of things need to be done, but I see this as a very cool way to show what HTML5 and its video element, combined with the power of JavaScript and mash-ups.

Notes

[1] I can't say how strongly I recommend watching this movie, starting with its trailer.

[2] It's actually the second one, as Henrik Moltke, co-author of Good copy, bad copy, is already working at Mozilla... on Drumbeat!

August 20, 2010 02:32 PM

August 19, 2010

Brett Gaylor

Where I've Been - Where I'm Going

As some of my friends and colleagues know, I’m actually quite late announcing some changes that have been afoot in my personal and professional life. Let me rectify!

In March I began a collaboration with Mozilla on Web Made Movies, an innovation lab bringing together software developers and filmmakers to innovate video on the web. (For folks who don’t know, Mozilla is a public benefit organization that promotes freedom and innovation on the Internet by building stuff like the Firefox web browser). Like anything worth doing, the Web Made Movies project shifted from its original conception, which was to create a documentary series about the open web using an open video platform. It became clear that the need for open video tools was too strong for only one content project to drive forward, and so the decision was made to focus on the creation of a lab where filmmakers and web developers could work collaboratively, and where storytelling and form were placed on an equal footing with technology. Since that decision, we teamed up with the Center for Development of Open Technology at Seneca College, and began our first project: Popcorn.js, a javascript library for merging video with semantic data. I have found the work challenging, rewarding, and affirming of my desire to innovate what video on the web can be. We’ve had some great early results - check out our demo of semantic video.

I’m particularly excited that Web Made Movies is part of Drumbeat, Mozilla’s initiative to involve a broad spectrum of society in its mission to build and protect the open Internet. I’ve believed for some time that in order for the internet to survive as an open platform, it can’t be only the geeks holding down the fort. Storytellers, educators, artists, journalists and activists need to get involved, feel welcome and have a stake in the internet remaining a global resource that everyone has a hand in shaping. I’m happy that Mozilla is moving in this direction – over 350 million people are touched every day by their work on Firefox, and having a public service organization in the browser space is a much needed check-and-balance system in an extremely competitive (and cutthroat) environment. Observing Mozilla over the last decade, I’ve been impressed by their pro-activism. They showed that a faster and safer internet experience was possible if they put the needs of the user before those of the board room – and they showed this was possible by BUILDING it, and continuing to improve it.

This is why I’ve made the decision to join Mozilla full time. Yup! I’ve accepted a full time position and I couldn’t be more thrilled. For the next several months I’ll be focusing on Web Made Movies – bringing in external projects, charting a course with developers, and collaborating with filmmakers to bring some storytelling innovation into open video on the web. In addition to Web Made Movies, I’ll be developing a series of documentary shorts that tell the story of Mozilla: our goal is to share the passion of the Mozilla community with the broader public – to let people know that there is a vibrant non-profit behind the browser. I want people to be as intrigued as I was to discover that Mozilla’s exists to Protect the Open Nature of the Internet - a Greenpeace for the online commons. Did you know we even have a Manifesto? We want to grow to a worldwide movement, made of millions of Internet users who act as stewards of the open web. We think storytelling is a means to this end.

Come the new year, I’ll be moving into my role as a project producer for Drumbeat. Along with an amazing team that includes my esteemed European colleague Henrik Moltke, Drumbeat ringleader Matt Thompson, Web Developer extraordinaire Paul Osman, Fundraising and outreach queen Chelsea Novak and of course our fearless leader - the Mozilla Foundation’s Executive Director Mark Surman,I will be actively seeking out promising projects that Drumbeat can help foster. Projects that invite participation from both software developers and people that aren’t normally involved in the development process: teachers, cartographers, musicians, chefs, you name it (ok, maybe no spammers). My job is to get more people involved in the cause of keeping the web open, and doing it the Mozilla way – by creating things. It’s pretty humbling to be in on the ground floor of such an important project.

Over the last several years, my wife Shelley and I have dreamed of moving to the BC coast where we come from. People often ask me “can’t you do your job from anywhere?”. The truth is, remote working is pretty tough in most situations. I’ve needed (and enjoyed) constant interaction with other filmmakers, funders, broadcasters, and a thriving urban culture to be able to survive as a working filmmaker. At Mozilla, though, working from home is a reality for a large part of the team, and the systems and tools they’ve developed over the years to facilitate the world’s largest open source project make it work (although it’s a learning curve to be sure). So we’re taking the plunge, and come this fall will be moving from the island of Montreal to Galiano Island where I grew up. It’s a fantastic place for kids, and our daughter Layla loves running around outside without her parents hovering over her 24/7. Next year come by when our garden is churning out the good stuff! (and if anyone knows how to set up a microwave mesh network between islands, give me a shout).

Of course, it is going to be tough to leave our friends in Montreal, particularly my crew at EyeSteelFilm. Since graduating University, and even before, I’ve worked with my colleagues on an amazing batch of films – assistant editing on Squeegee Punks in Traffic, and then shooting and editing on Roach’s follow up, RoachTrip. I went to the Arctic as a co-creator of Inuuvunga: I am Inuk, I Am Alive, took a tour of duty in the editing suite on Chairman George, learned drupal and humility on homelessnation.org, and for six plus years was given sage advice, tough love and incredible teamwork in the creation of Rip! A Remix Manifesto. There are so many great people working at what has become the undisputed coolest documentary production company in Canada, if not the planet earth. I wish the entire crew the brightest of futures, not that they need this nerd’s wishing to get them anywhere. The new slate of projects and new crop of never-say-die indy filmmakers will continue to slay pitching competitions, film festivals and television screens the world over.

I moved to this city in 1997 – the world wide web was in its infancy. Back then, Apple was an underdog, Google was running on pentiums at Stanford, and Netscape was kicking serious ass. The web continues to surprise us, and not a day goes by that I don’t marvel to be living in such interesting times. As I start a new chapter, with a new team and and a new family, I can’t wait to see what happens next. Won’t you join me?

August 19, 2010 01:54 AM

June 17, 2010

Brett Gaylor

Early Web Made Movies wireframes

We’ve been working with the ultra-talented Gopal Raju to design some wireframes for the demo we’ll be launching at the end of the month.  Feedback appreciated!

Version 1

Version 2

June 17, 2010 01:47 AM